实例详解BootStrap的动态模态框及静态模态框


Posted in Javascript onAugust 13, 2018

1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样

代码如下:

有疑问的可以在下面留言,欢迎大家一起交流

1.1动态模态框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
  <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
  <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
  <script src="bootstrap-3.3.7/js/docs.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="page-header">
          <div class="h2">bootstrap框架 <small>s</small>
          </div>
        </div>
  <!-- 动态框 -->
<div class="modal">
  <!-- modal默认是隐藏的 -->
  <div class="modal-dialog">         
    <div class="modal-content">
     <!-- 头部关闭按钮 -->
      <div class="modal-header">       
        <button type="button" class="close myclose" data-dismiss="modal"><span >×</span></button>
        <div class="h3 modal-title">标题部分</div>
        <!-- 内容部分 -->
        <div class="modal-body">
          <P>这是内容部分</P>
        </div>
        <!-- 页脚 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary myclose" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-warning myclose">save</button>
        </div>
      </div>
    </div>
  </div>
  
</div>
  <a href="#" rel="external nofollow" class="btn btn-success" id="show">显示对话框</a>
    </div>
</body>
</html>
<script>
  $(function(){
    $('#show').click(function(){
      $('.modal').modal('show')
    })
  })
</script>

1.2静态模态框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="external nofollow" >
  <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
  <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
  <script src="bootstrap-3.3.7/js/docs.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="page-header">
      <div class="h2">bootstrap框架 <small>s</small>
      </div>
      
     <!-- 静态模态框 官方有一个bug就是在写静态框的时候在按钮上要绑定同一个class-->
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close myclose" data-dismiss="modal">
                <span>×</span>
              </button>
              <h3>Model标题</h3>              
           </div>
           <!-- body部分 -->
           <div class="modal-body">
             <p>这是身体部分</p>
           </div>
           <!-- footer部分 -->
           <div class="modal-footer">
             <button class="btn btn-info myclose" data-dismiss="modal">close</button>
             <button class="btn btn-primary myclose">save</button>
           </div>
          </div>
        </div>
      </div>
 </div> 
   </div>
  </div>
</body>
</html>
<script>
  $(function(){
    $('.myclose').click(function(){
      $('.modal-dialog').css('display','none')
    })
  })
</script>

总结

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

Javascript 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
使用JavaScript实现node.js中的path.join方法
Aug 12 #Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 #Javascript
Vue实现左右菜单联动实现代码
Aug 12 #Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 #Javascript
vue实现商品加减计算总价的实例代码
Aug 12 #Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 #Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
You might like
php 计划任务 检测用户连接状态
2012/03/29 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
pandas 如何分割字符的实现方法
2019/07/29 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
opencv实现简单人脸识别
2021/02/19 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
ORACLE第二个十问
2013/12/14 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
化学教师自荐信范文
2013/12/28 职场文书
12月红领巾广播稿
2014/02/13 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
创先争优宣传标语
2014/10/08 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
民事起诉书范本
2015/05/19 职场文书
实习报告怎么写
2019/06/20 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
Python django中如何使用restful框架
2021/06/23 Python