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 相关文章推荐
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
vuex存值与取值的实例
Nov 06 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
小程序开发之模态框组件封装
Apr 23 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 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
德生1994机评
2021/03/02 无线电
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
vue .sync修饰符的使用详解
2018/06/15 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python functools模块学习总结
2015/05/09 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
打架检讨书300字
2014/02/02 职场文书
《手指教学》反思
2014/02/14 职场文书
献爱心活动总结
2014/05/07 职场文书
煤矿安全生产标语
2014/06/06 职场文书
乐山大佛导游词
2015/02/02 职场文书
护士个人年度总结范文
2015/02/13 职场文书
博士生专家推荐信
2015/03/25 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA