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. [JAVA关键字] synchronized

    synchronized, Example: public synchronized void XXX() {} 参考 http://wenku.baidu.com/link?url=ecb1Zivf ...

  2. 使用 virtualenv

    关于virtualenv的资料: http://virtualenv-chinese-docs.readthedocs.org/en/latest/ 用的python3,但是搭建 Robot Fram ...

  3. pl sql developer登陆界面找不到oracle数据库选项

    window 64位的操作系统 装的数据库win64_11gR2的数据库,PL SQL是PLSQL Developer 7.1.5最后是下载了一个instantclient_11_2包将你数据库安装路 ...

  4. Lucene实例教程

    Lucene是apache组织的一个用java实现全文搜索引擎的开源项目. 其功能非常的强大,api也很简单.总得来说用Lucene来进行建立 和搜索和操作数据库是差不多的(有点像),Document ...

  5. CentOS 搭建 FastDFS-5.0.5集群

    转http://www.open-open.com/lib/view/open1435468300700.html 第一步,确定目标: Tracker  192.168.224.20:22122  C ...

  6. 杯具，万达电商又换CEO

    万达电商CEO再离职.而这距他入职还差一个月才满一年. 昨晚.万达电商CEO董策告诉新浪科技6月3日已正式从万达电商离职.将去往澳洲照应家人.而谈到离职原因和万达电商时,董策以开会为由收了电话. 从2 ...

  7. android AppWidgwtProvider学习

    实现AppWidgwtProvider: onUpdate() //在达到制定的更新时间之后或者当用户向桌面添加   App Widget时会调用该方法. onDeleted() //当App Wid ...

  8. python中的TCP编程学习

    今天看了一下关于python的TCP编程. 发现思路和其他语言(比如java)思路基本上差点儿相同. 先看client.基本过程例如以下: 第一步:创建一个socket 第二步:建立连接 第三步:发送 ...

  9. 深入分析 Java 中的中文编码问题--转

    几种常见的编码格式 为什么要编码 不知道大家有没有想过一个问题,那就是为什么要编码?我们能不能不编码?要回答这个问题必须要回到计算机是如何表示我们人类能够理解的符号的,这些符号也就是我们人类使用的语言 ...

  10. POJ 1330 Nearest Common Ancestors(LCA模板)

    给定一棵树求任意两个节点的公共祖先 tarjan离线求LCA思想是,先把所有的查询保存起来,然后dfs一遍树的时候在判断.如果当前节点是要求的两个节点当中的一个,那么再判断另外一个是否已经访问过,如果 ...