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. [Locked] Wiggle Sort

    Wiggle Sort Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= ...

  2. eclipse运行内存不足解决办法

    选中所要执行的类,鼠标右键移动到Run As选项,接着选择Run Configurations...选项,在弹出的选项卡中选择Arguments,在VM arguments下面的输入框中输入-Xmx1 ...

  3. STRUCTS 2 UPLOAD

    {LJ?Dragon}[标题]structs2 上传文件中文乱码问题 {LJ?Dragon}[Daily] 1.配置struts.xml文件 <?xml version="1.0&qu ...

  4. jQuery常用事件详解

    window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者 ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下 ...

  5. UIAlertView弹出框

    <Alert弹出框提示用户信息>    1.遵循代理方法<UIAlertViewDelete>    2.调用方法UIAlertView *alert = [[UIAlertV ...

  6. MongoDB 聚合

    聚合操作过程中的数据记录和计算结果返回.聚合操作分组值从多个文档,并可以执行各种操作,分组数据返回单个结果.在SQL COUNT(*)和group by 相当于MongoDB的聚集. aggregat ...

  7. Struts2接收参数的几种方式

    一.用Action属性 在action里定义要接收的参数,并提供相应的set和get方法. 如: public class LoginAction extends ActionSupport { pr ...

  8. C# 对JS编码/解码进行转换

    public static class Extension { #region [编码/解码统一转换] /// <summary> /// /// </summary> /// ...

  9. 用crontab设置svn的定期更新任务

    本以为用crontab设置svn的定期更新任务是件非常容易的事情,实践后方才知道,其实并不那么容易.设置例行性工作如下:0 8 * * * /usr/bin/svn up /data/test第二天, ...

  10. golang中channel的超时处理

    并发中超时处理是必不可少的,golang没有提供直接的超时处理机制,但可以利用select机制来解决超时问题. func timeoutFunc() { //首先,实现并执行一个匿名的超时等待函数 t ...