bootstrap 模态 modal  小例子

<html>

 <head>

  <meta charset="utf-8" />

  <title>Bootstrap 实例 - 模态框（Modal）插件</title>

  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

 </head>

 <body>

  <h2>创建模态框（Modal）</h2> 

  <button class="btn btn-primary btn-lg"   data-remote="false" href="d.html" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> 

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

   <div class="modal-dialog" style="width:600px">

    <div class="modal-content">

     <div class="modal-header">

      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>

      <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题2 </h4>

     </div>

            1<br/>2<br/>3<br/>

     <div class="modal-footer">

      <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>

      <button type="button" class="btn btn-primary"> 提交更改 </button>

     </div>

    </div>

   </div>

  </div>  

 </body>

</html>

bug1 bootstrap3打开modal后下层网页内容出现右移

参考: bootstrap3打开modal后下层网页内容出现右移

据说可以,但变成其它地方移动了.

.modal-open {

  overflow: initial !important;

}

bootstrap 模态 modal 小例子【转】的更多相关文章

  1. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  2. vue +bootstrap 写的小例子

    最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2 ...

  3. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  4. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  6. 【转】bootstrap模态框（modal)使用remote方法加载数据，只能加载一次的解决办法

    http://blog.csdn.net/coolcaosj/article/details/38369787 bootstrap的modal中,有一个remote选项,可以动态加载页面到modal- ...

  7. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  8. bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  9. 使用bootstrap模态框实现浮动层

    authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals ...

随机推荐

  1. HTML DOM 学习笔记

    一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...

  2. Java 中文 乱码问题

    Java平台遇到的两类问题: 1.源代码中文乱码问题: a.Java文件,中文乱码,配置IDE的Preference的编码格式,总有一款适合你. b.HTML(JSP.....)文件,中文乱码,添加并 ...

  3. Effective C++（第三版）笔记 ---- 第一部分让自己习惯C++

    内容从侯捷译版的<Effective C++>(第三版)摘录 条款一 C++作为一个多种范式融合的语言,可以看成是语言的联邦,它包含了一下四种主要的次语言: C.C++以C为基础,很多时候 ...

  4. Jmeter 常用断言使用

    响应断言 可根据要测试响应字段和模式匹配规则来设置断言,比如下方截图是匹配返回的结果中是否包含"code:200,",如果包含则表示断言成功,否则失败.响应断言可添加多个,但是多个 ...

  5. wamp升级php5.3.10到5.4.31版本

    wamp升级php5.3.10到5.4.31版本 1.  停止WAMP服务器. 2.  去网站windows.php.net 下载php-5.4.31-nts-Win32-VC9-x86.zip. 不 ...

  6. SQLSERVER 2014 内存优化表相关

    更新了SP2的补丁能够解决  不能收缩日志文件的bug了. 但是因为已经不用内存优化表了, 所以想着能够删除内存优化表的file group 但是发现 很难删除 先说结论: 以下是针对内存优化文件组的 ...

  7. mysql学习笔记三 —— 数据恢复与备份

    要点: 1.存储引擎2.导入导出3.备份与恢复 查看当前数据库中的所有表use db1:show tables: 1.存储引擎 不同的发动机(引擎)适用的汽车类型不一样. 存储和处理的不同方式.不同的 ...

  8. Test Scenarios for result grid

    1 Page loading symbol should be displayed when it is taking more than default time to load the resul ...

  9. bzoj1001狼抓兔子

    1001: [BeiJing2006]狼抓兔子 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还比较笨,它们只有两个窝,现在你 ...

  10. 自学Linux Shell19.2-gawk程序高级特性

    点击返回 自学Linux命令行与Shell脚本之路 19.2-gawk程序高级特性 linux世界中最广泛使用的两个命令行编辑器: sed gawk 1. gawk使用变量 编程语言共有的特性是使用变 ...