bootstrap 模态框
2018-12-31 本文已影响66人
前端来入坑
展示大模态框和小模态框两种，通过modal-lg和modal-sm来控制，bootstrap的模态框自带响应式，移动端优先，在移动端也能有很好的效果：
happy new years！
在移动端，大模态框和小模态框都是同样大小。
<!DOCTYPE doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="images/lx.ico" rel="shortcut icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
<title>
myBootstrap-modal
</title>
</head>
<body>
<button class="btn btn-primary" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">
Large modal
</button>
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="savemodaLabel">
新年快乐
</h3>
</div>
<div class="modal-body">
是否踏入2019年？
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">
关闭
</button>
<button class="btn btn-primary" data-dismiss="modal" id="confirm" type="button">
确定
</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button class="btn btn-primary" data-target=".bd-example-modal-sm" data-toggle="modal" type="button">
Small modal
</button>
<div aria-hidden="true" aria-labelledby="mySmallModalLabel" class="modal fade bd-example-modal-sm" role="dialog" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="savemodaLabel">
新年快乐
</h3>
</div>
<div class="modal-body">
是否踏入2019年？
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">
关闭
</button>
<button class="btn btn-primary" data-dismiss="modal" id="confirm" type="button">
确定
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.6/esm/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- 各种库可以在bootcdn上下载到本地https://www.bootcdn.cn/ -->
</body>
</html>
happy new years！
happy new years！
js控制模态框的隐藏
$("#myBtn").click(function() {
setTimeout(function() {
$('#myModal').modal("hide")
},3000);
})
模态框隐藏.png
官网https://v4.bootcss.com/docs/4.0/components/modal/#remove-animation
