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. 我的集合学习笔记--LinkedList

    一,Node节点: /** * 存储元素基本单位 */ public class Node { Object data; Node pre; Node next; public Node(Node p ...

  2. react + dva + ant架构后台管理系统(一)

    一.什么是dva dva是蚂蚁金服推出的一个单页应用框架,对 redux, react-router, redux-saga进行了上层封装,没有引入新的概念,但是极大的程度上提升了开发效率: 二.安装 ...

  3. [书摘]Windows内存管理术语

    1. Virtual Address space 虚拟地址空间 一个应用程序能够访问的最大的内存地址空间, 32位的机器上面最大的就是4GB 但是 并不是所有的内存都放到主存里面, 可能放到pagef ...

  4. ACDsee的安装过程

    http://www.ddooo.com/softdown/76175.htm ACDSee 18中文版安装教程: 1.ACDSee 18分为32位和64位版本,我们先选择合适系统的中文版本开始安装, ...

  5. Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件

    $(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...

  6. Centos 7最小化安装后配置

    关闭SELINUX vi /etc/sysconfig/selinux SELINUX=disabled :wq 配置网卡(最小化安装后ifconfig无法使用),该配置的前提是采用 NAT模式 vi ...

  7. jdk1.8 HashMap的扩容resize()方法详解

    /** * Initializes or doubles table size. If null, allocates in * accord with initial capacity target ...

  8. [资源]--IOS捷径大全，众多实用小功能

    一.实用工具 1.支付助手3.0(新) (扫一扫.微信扫码.微信收款.支付宝扫码.Apple Pay.AA付款.查快递.蚂蚁森林.蚂蚁庄园.彩票.股票.运动.淘票票.乘车码.生活缴费.火车票等等): ...

  9. php-编译模块2

    PHP扩展-扩展的生成和编译 首先说明一下,PHP扩展有两种编译方式:方式一:在编译PHP时直接将扩展编译进去方式二:扩展被编译成.so文件,在php.ini里配置加载路径: 以下开始说明创建PHP扩 ...

  10. BZOJ1212[HNOI2004]L语言——trie树+DP

    题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...