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. CM给hive添加自定义jar包

    使用的是cloudera manager管理的集群: hive添加自定义jar包 服务端:高级:Hive 辅助 JAR 目录 设置的的路径是影响所有服务端的设置,比如hue中使用到了hive查询编辑器 ...

  2. bottlepy template

    bottle template usage 1 example 使用bottle模板,最简单的方法是使用template函数或view装饰器 1.1 template 函数 例子如下: from bo ...

  3. R语言向量

    R语言基础:向量  心无咎 2012-04-02 13:37:00 向量(vector)1.seq():产生有规律的数列,间距省略时默认值为1.        例1:seq(10, 20, 0.5)  ...

  4. lintcode-【中等】恢复IP地址

    题目 给一个由数字组成的字符串.求出其可能恢复为的所有IP地址.链接. 样例 给出字符串 "25525511135",所有可能的IP地址为: [ "255.255.11. ...

  5. SNMP开发c#，高薪诚聘，或者外包开发

    现在手里有一个IT资产管理方面的项目,主要会用到SNMP协议,要用这个协议进行开发,对网络上的设备进行控制, 现在高薪诚聘高手,或者项目外包合作,有意向的同学们可以联系我,时间紧迫, QQ:39011 ...

  6. 写 test-case心得

    最近,写ticket较多,由于每天有忙不完的工作加不完的班,心里逐渐有一个小人儿在抱怨了.此种情况下,慢慢的写case时边变得懒散,想钻空闲,于是便简简单单总结几个纲要便完事.提交test-case到 ...

  7. 一个input标签搞定含内外描边及阴影的按钮～

    自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...

  8. JVM内存模型与性能调优

    堆内存(Heap) 堆是由Java虚拟机(JVM,下文提到的JVM特指Sun hotspot JVM)用来存放Java类.对象和静态成员的内存空间,Java程序中创建的所有对象都在堆中分配空间,堆只用 ...

  9. Windows内核原理系列01 - 基本概念

    1.Windows API Windows 应用编程接口(API)是针对WIndwos操作系统用户模式的系统编程接口,包含在WindwosSDK中. 2.关于.NET .NET由一个被称为FCL的类库 ...

  10. php 中常见的函数及系统常量

    1.判断是否存在某函数: function_exists('memory_get_usage'): 2.统计程序执行到某节点消耗的系统内存: memory_get_usage(); 3.当前访问目录的 ...