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中对象的深复制和浅复制详解

    1．浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵ ...

  2. F - Wormholes

    题目大意: 农民约翰在农场散步的时候发现农场有大量的虫洞,这些虫洞是非常特别的因为它们都是单向通道,为了方便现在把约翰的农田划分成N快区域,M条道路,W的虫洞. 约翰是时空旅行的粉丝,他希望这样做,在 ...

  3. runtime 如何实现 weak 属性

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙(子循),目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 要实现 weak 属性,首先要搞清楚 ...

  4. Solr系列二：Solr与mmseg4j的整合

    mmseg4j是一个很好的中文分词器,solr与mmseg4j的整合也非常简单.如下: 第一步:下载mmseg4j的jar包,网上搜索一下有很多下载地址,如下是csdn上的一个连接:http://do ...

  5. iframe与父页面中JS执行顺序控制

    同事遇到了一个问题: 父页面中有几个iframe,初衷是父页面的JS通过AJAX获取数据,然后用于初始化iframe页面,可以结果却是有的iframe页面却不能获得数据. [问题根源] 父页面在加载i ...

  6. STM8S 独立看门狗配置及使用

    //独立看门口的时钟来源 内部低速时钟 128khz 除以2 即64khz //选择 IWDG_Prescaler_128 //64/128 =0.5 khz 2ms周期 #define IWDG_5 ...

  7. 【转】Android Studio中Git的配置及协同开发

    一. Android Stutio配置git   setting–>Version Control–>Git–>Path to Git executable中选择git.exe的位置 ...

  8. Coppersmith-Winograd 算法

    转自:https://www.douban.com/group/topic/29658298/ 对正整数 $q$,定义张量 $T$,其对应的多项式为 $p(X,Y,Z)=\sum_{i=1}^q (X ...

  9. Android 中Webview 自适应屏幕

    随笔 - 478  文章 - 3  评论 - 113 Android 中Webview 自适应屏幕   webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...

  10. eclipse开发servlet应用，Tomcat无法访问jpg图片 ===第二版===

    之前版本中,设置完后,确实可以访问图片了,但是问题接着来了,那就是,无法访问servlet的服务了. 后来想了下,原因也挺好理解的,设置到了Tomcat目录,而项目没有部署,所以没能访问. 但是怎么两 ...