BootStrap 弹出层代码


Posted in Javascript onFebruary 09, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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 弹出层代码

以上所述是小编给大家介绍的BootStrap 弹出层代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JS实现拖动示例代码
Nov 01 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 #Javascript
javascript history对象详解
Feb 09 #Javascript
jquery dialog获取焦点的方法
Feb 09 #Javascript
jQuery实现淡入淡出的模态框
Feb 09 #Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 #Javascript
JS在浏览器中解析Base64编码图像
Feb 09 #Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 #Javascript
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
对python中的iter()函数与next()函数详解
2018/10/18 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python 实现的车牌识别项目
2021/01/25 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
EJB的激活机制
2013/10/25 面试题
计算机专业推荐信范文
2013/11/20 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
创先争优公开承诺书
2014/08/30 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
个人党性锻炼总结
2015/03/05 职场文书
教师节联欢会主持词
2015/07/04 职场文书
六五普法心得体会2016
2016/01/21 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
python基础之//、/与%的区别详解
2022/06/10 Python