实例详解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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
Javascript面向对象编程
Mar 18 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
使用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
我的论坛源代码(三)
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php explode函数实例代码
2012/02/27 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Joomla开启SEF的方法
2016/05/04 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
微信小程序支付PHP代码
2018/08/23 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python 计算文件的md5值实例
2017/01/13 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python自带的IDE在哪里
2020/07/01 Python
python 数据类型强制转换的总结
2021/01/25 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
店长岗位的工作内容
2013/11/12 职场文书
大学学习生活感言
2014/01/18 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
面试通知短信
2015/04/20 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS