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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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 新手入门教程
2009/08/03 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
彻底理解Python list切片原理
2017/10/27 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
基于python实现文件加密功能
2020/01/06 Python
python中with用法讲解
2020/02/07 Python
python常量折叠基础知识点讲解
2021/02/28 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
C++的几个面试题附答案
2016/08/03 面试题
C#软件工程师英语面试题
2015/06/07 面试题
社会工作专业自荐信
2014/09/26 职场文书
顶岗实习计划书
2015/01/16 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
学习雷锋主题班会
2015/08/14 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js