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

目录：

1，bootstrap模态框的使用示例

2，注意点

1，下面是一个简单的例子说明bootstrap模态框的使用：

 <!DOCTYPE html>　　//modal.html

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" />

     <script src="js/jquery-1.11.2.min.js"></script>

     <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

 </head>

 <body>

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

     <!-- 按钮触发模态框 -->

     <button class="btn btn-primary btn-lg" data-toggle="modal" href="test.html"

             data-target="#myModal">

         开始演示模态框

     </button>

     <!-- 模态框（Modal） -->

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog"

          aria-labelledby="myModalLabel" aria-hidden="true">

         <div class="modal-dialog">

             <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）标题

                     </h4>

                 </div>

                 <div class="modal-body">

                     在这里添加一些文本

                 </div>

                 <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><!-- /.modal-content -->

         </div><!-- /.modal -->

 </body>

 </html>
 <!DOCTYPE html>　　　　　　//test.html

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <style>

         .test {

             font-size:x-large;

            background-color:yellow

         }

     </style>

 </head>

 <body>

     <div class="test">test</div>

 </body>

 </html>

2，ps:在实际项目中一般点击a标签或者是button触发方法，然后通过发送ajax将内容填充到modal-content中,需要注意的是每次重新填充时，需要清空modal-content中的内容。

使用bootstrap模态框实现浮动层的更多相关文章

  1. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  2. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  3. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  4. Bootstrap 模态框

    Bootstrap 模态框(也可以说的弹出层) 最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可 ...

  5. bootstrap模态框input不能获取焦点并编辑【转】

    Bootstrap模态框时input标签[日期控件也有这样的问题]不能编辑的问题,下面是我的解决方法: 1.将下图中框出来的属性删掉即可: 2.兼容火狐浏览器,笔者在火狐中还是不能编辑,去掉下图属性即 ...

  6. 解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决

    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...

  7. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

  8. JavaScript：bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

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

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

随机推荐

  1. 病毒侵袭 - HDU 2896（AC自动机）

    分析:有点需要注意的,输入的字符是所有可见的ASCII码,刚开始没看清一直以为是小写字母.............注意到这点后这题就是裸的自动机了.   代码如下: ================= ...

  2. 【OSGi】OSGi生命周期

    1 生命周期管理 对于非模块化应用,生命周期将应用作为一个整体来操作: 而对于模块化应用,则可以以细粒度的方式来管理应用的某一个独立部分. OSGi生命周期管理 OSGi生命周期层有两种不同的作用: ...

  3. [置顶] VC++界面编程之--使用分层窗口实现界面皮肤

    使用分层界面来实现界面皮肤的好处是:可以保证图片边缘处理不失真,且能用于异形窗口上,如一些不规则的窗口,你很难用SetWindowRgn来达到理想效果. 在很多情况下,界面的漂亮与否,取决于PS的制作 ...

  4. Fiddler 抓包 教程

    Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler是最 ...

  5. tomcat绿色版及安装版修改内存大小的方法

    1.对于安装版,比较方便了,直接运行tomcat6w.exe,选择Java选项卡, 在这里,可以设置初始化内存,最大内存,线程的内存大小. 初始化内存:如果机器的内存足够大,可以直接将初始化内存设置为 ...

  6. uva：10340 - All in All（字符串匹配）

    题目:10340 - All in All 题目大意:给出字符串s和t,问s是否是t的子串.s若去掉某些字符能和t一样,那么t是s的子串. 解题思路:匹配字符.t的每一个字符和s中的字符匹配.注意这里 ...

  7. Ubuntu server下安装JDK和Tomcat7

    服务器是Ubuntu server 12.04 LTS 64bit 所有操作假设已经有root权限,若没有需要添加sudo. 一. 安装JDK 1.去Oracle官网下载jdk-6u45-linux- ...

  8. [PWA] 12. Intro to IndexedDB

    Use the library indexedDB-promised. Create a database and stroe: import idb from 'idb'; // Open(db_n ...

  9. android shape的使用详解以及常用效果（渐变色、分割线、边框、半透明阴影效果等）

    shape使用.渐变色.分割线.边框.半透明.半透明阴影效果. 首先简单了解一下shape中常见的属性.(详细介绍参看  api文档 ) 转载请注明:Rflyee_大飞: http://blog.cs ...

  10. inux 安装中文支持包及中文字符集配置 +i18n

    由于某些原因系统安装时未安装中文支持,导致后续应用出现中文方块乱码现象, 解决方法很简单,当然不是重装,只需以下三步即可搞定. .安装中文包: yum -y groupinstall chinese- ...