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. JNI相关知识

    JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? |-  首先,Java语言 ...

  2. OpenGL 像素在内存中的排列方式

    在OpenGL中所有和图像像素有关的API(包括glTexImage2D, glReadPixels等)第一个像素从左下角开始,从左到又一次排列,满了从下到上排列. 这个和Windows 下惯用的左上 ...

  3. RESTful Web Services初探

    RESTful Web Services初探 作者:杜刚 近几年,RESTful Web Services渐渐开始流行,大量用于解决异构系统间的通信问题.很多网站和应用提供的API,都是基于RESTf ...

  4. 14，SFDC 管理员篇 - 外部数据集成

    1,Connect an External Data Source, 添加新的数据源,填写如下 2, 点击Validate and Sync 按钮 3,添加Orders和Orders Details ...

  5. MongoDB（五）mongo语法和mysql语法对比学习

    我们总是在对比中看到自己的优点和缺点,对于mongodb来说也是一样,对比学习让我们尽快的掌握关于mongodb的基础知识. mongodb与MySQL命令对比 关系型数据库一般是由数据库(datab ...

  6. 用PHP向mysql添加数据

    <?php $name=$_POST['name']; $gender = $_POST['gender']; $age=$_POST['age']; #连接到数据库 $link = mysql ...

  7. MySQL 第七天（核心优化一）

    一．Mysql核心优化 1. 优化的方面 ① 存储层:数据表"存储引擎"选取.字段选取.逆范式(3范式) ② 设计层:索引.分区/分表 ③ 架构层:分布式部署(主从模式/共享) ④ ...

  8. IP地址划分

    对于32位的IPV4地址来说,有5中IP地址类型 A类IP地址第一个字节是网络地址,后三个字节是主机地址,且最高位以0开头. 0000001  00000000   00000000 00000001 ...

  9. canvas知识点

    看到网上某些特别好看的效果,就突然想看看这个canvas; canvas是html5中的一个标签.所以兼容的是Internet Explorer 9.Firefox.Opera.Chrome 和 Sa ...

  10. 关于已配置log4j，运行tomcat时显示警告的分析

    有时候,我们在JavaEE项目中配置了log4j及其参数信息,但是启动tomcat时,仍会显示如下信息: