BootStrap 弹出层代码
更新时间：2017年02月09日 11:20:54 作者：轻扰时光
这篇文章主要介绍了BootStrap 弹出层代码的相关资料,非常补充，具有参考借鉴价值，需要的朋友可以参考下
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<!--注意：1.弹出层必须放在body里
2.弹出层里面不能再嵌套别的层
3.弹出层弹出来以后，页面的滚动条会被覆盖-->
<div class="container">
<div class="row">
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">弹出一个小层</button><!--data-toggle="modal"给button一个点击事件，弹出一个模态窗口-->
<button class="btn btn-primary" data-toggle="modal" data-target=".myModal2">弹出一个大层</button>
</div>
</div>
<div class="modal fade myModal1"><!--modal,弹出层父级,fade使弹出层有一个运动过程-->
<div class="modal-dialog"><!--modal-dialog,弹出层-->
<div class="modal-content"><!--modal-content,弹出层内容区域-->
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button><!--将关闭按钮放在标题前面可以使按钮位于右上角-->
<h4>水果摊</h4>
</div><!--modal-header,弹出层头部区域-->
<div class="modal-body">
<p>苹果葡萄香蕉柿子火龙果便宜卖了，多买优惠更多，还在等什么呢？</p>
<p>苹果葡萄香蕉柿子火龙果便宜卖了，多买优惠更多，还在等什么呢？</p>
<p>苹果葡萄香蕉柿子火龙果便宜卖了，多买优惠更多，还在等什么呢？</p>
</div><!--modal-body,弹出层主体区域-->
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确定</button><!--data-dismiss="modal"点击按钮之后可以关闭窗口-->
</div><!--modal-footer,弹出层底部区域-->
</div>
</div>
</div>
<div class="modal myModal2"><!---->
<div class="modal-dialog modal-lg"><!--还有modal-sm，modal-md-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>水果摊</h4>
</div>
<div class="modal-body">
<p>苹果葡萄香蕉柿子火龙果便宜卖了，多买优惠更多，还在等什么呢？</p>
<p>苹果葡萄香蕉柿子火龙果便宜卖了，多买优惠更多，还在等什么呢？</p>
<p>苹果葡萄香蕉柿子火龙果便宜卖了，多买优惠更多，还在等什么呢？</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
以上所述是小编给大家介绍的BootStrap 弹出层代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
今天小编就为大家分享一篇js使用ajax传值给后台,后台返回字符串处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
各浏览器对document.getElementById等方法的实现差异解析
这篇文章主要是对各浏览器对document.getElementById等方法的实现差异进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了JS HTML5拖拽上传图片预览的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
JavaScript中Hoisting详解 (变量提升与函数声明提升)
函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。下面这篇文章主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了JS 中实现一个串型异步函数队列，文章通过async/await 串型请求展开详情，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
下面小编就为大家分享一篇解决js ajax同步请求造成浏览器假死的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了ES6基础之 Promise 对象用法,结合实例形式详细分析了ES6中 Promise 对象功能、用法及相关操作注意事项,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了layui动态表头的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JS+DIV+CSS排版布局实现美观的选项卡效果,通过简单的div+css布局结合JavaScript切换页面样式实现美观的选项卡效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要给大家介绍了关于javascript中闭包closure的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论