实例详解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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
javascript定时器完整实例
Feb 10 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
原生js实现二级联动菜单
Nov 27 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
使用PHP编写发红包程序
2015/07/22 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
javascript知识点收藏
2007/02/22 Javascript
js更优雅的兼容
2010/08/12 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
Seajs的学习笔记
2014/03/04 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Python入门学习指南分享
2018/04/11 Python
用Python解决x的n次方问题
2019/02/08 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
少先队入队活动方案
2014/02/08 职场文书
毕业论文评语大全
2014/04/29 职场文书
小学生常见病防治方案
2014/06/06 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL