1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 模态框（Modal）插件方法</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <h2>模态框（Modal）插件方法</h2>
  12.  
  13. <!-- 按钮触发模态框 -->
  14. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  15.    开始演示模态框
  16. </button>
  17.  
  18. <!-- 模态框（Modal） -->
  19. <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
  20.    aria-labelledby="myModalLabel" aria-hidden="true">
  21.    <div class="modal-dialog">
  22.       <div class="modal-content">
  23.          <div class="modal-header">
  24.             <button type="button" class="close" data-dismiss="modal"
  25.                aria-hidden="true">×
  26.             </button>
  27.             <h4 class="modal-title" id="myModalLabel">
  28.                模态框（Modal）标题
  29.             </h4>
  30.          </div>
  31.          <div class="modal-body">
  32.             按下 ESC 按钮退出。
  33.          </div>
  34.          <div class="modal-footer">
  35.             <button type="button" class="btn btn-default"
  36.                data-dismiss="modal">关闭
  37.             </button>
  38.             <button type="button" class="btn btn-primary">
  39.                提交更改
  40.             </button>
  41.          </div>
  42.       </div><!-- /.modal-content -->
  43.    </div><!-- /.modal-dialog -->
  44. </div><!-- /.modal -->
  45. <script>
  46.    $(function () { $('#myModal').modal({
  47.       keyboard: true
  48.    })});
  49. </script>
  50.  
  51. </body>
  52. </html>

　　BootStrap 模态框的使用方法。

Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。 
  1. $('#identifier').modal({
  2. keyboard: false
  3. })
Toggle: .modal('toggle') 手动切换模态框。 
  1. $('#identifier').modal('toggle')
Show: .modal('show') 手动打开模态框。 
  1. $('#identifier').modal('show')
Hide: .modal('hide') 手动隐藏模态框。 
  1. $('#identifier').modal('hide')

选项

有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称 类型/默认值 Data 属性名称 描述
backdrop boolean 或 string 'static'
默认值：true		 data-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard boolean
默认值：true		 data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show boolean
默认值：true		 data-show 当初始化时显示模态框。
remote path
默认值：false		 data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

BootStrap 模态框基本用法的更多相关文章

  1. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  2. bootstrap模态框远程加载网页的正确处理方式

    bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...

  3. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

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

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

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

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

  6. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  7. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  8. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  9. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

随机推荐

  1. tab_切换

    记忆: 一.这里用到了jQuery遍历---filter()方法: filter() 方法将匹配元素集合缩减为匹配指定选择器的元素. 二.HTML DOM hash属性 hash 属性是一个可读可写的 ...

  2. Java eclipse下 Ant build.xml实例详解

    在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...

  3. java net编程

    转自:http://www.cnblogs.com/linzheng/archive/2011/01/23/1942328.html 一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台 ...

  4. POJ3613 Cow Relays（矩阵快速幂）

    题目大概要求从起点到终点恰好经过k条边的最短路. 离散数学告诉我们邻接矩阵的k次幂就能得出恰好经过k条路的信息,比如POJ2778. 这题也一样,矩阵的幂运算定义成min,而min满足结合律,所以可以 ...

  5. C#调用本机摄像头

    这段时间一个小项目中需要调用本机的摄像头进行拍照,网上搜集了一些资料以及解决的一些小问题,在此记录以便后续使用. 硬件环境:联想C360一体机,自带摄像头 编写环境:vs2010 语言:C# WPF ...

  6. NUC_TeamTEST_B（贪心）

    B - B Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  7. ural 2062 Ambitious Experiment

    2062. Ambitious Experiment Time limit: 3.0 secondMemory limit: 128 MB During several decades, scient ...

  8. The 2015 China Collegiate Programming Contest C. The Battle of Chibi hdu 5542

    The Battle of Chibi Time Limit: 6000/4000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Othe ...

  9. outlook——还原“未读邮件”文件夹

    参考链接:http://office.microsoft.com/zh-cn/outlook-help/HA010283248.aspx 摘抄: 还原“未读邮件”文件夹 全部显示 全部隐藏 “未读邮件 ...

  10. Storm-166：Nimbus HA solution based on Zookeeper

    Nimbus HA feature is quite important for our application running on the storm cluster. So, we've bee ...