<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 模态框（Modal）插件方法</title>

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

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h2>模态框（Modal）插件方法</h2>

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

<button class="btn btn-primary btn-lg" data-toggle="modal" 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">×

            </button>

            <h4 class="modal-title" id="myModalLabel">

               模态框（Modal）标题

            </h4>

         </div>

         <div class="modal-body">

            按下 ESC 按钮退出。

         </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-dialog -->

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

<script>

   $(function () { $('#myModal').modal({

      keyboard: true

   })});

</script>

</body>

</html>

　　BootStrap 模态框的使用方法。

Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。 
$('#identifier').modal({

keyboard: false

})
Toggle: .modal('toggle') 手动切换模态框。 
$('#identifier').modal('toggle')
Show: .modal('show') 手动打开模态框。 
$('#identifier').modal('show')
Hide: .modal('hide') 手动隐藏模态框。 
$('#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，则会加载其中的内容。如下面的实例所示：

<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. Java学习笔记（三）——运算符

    一.运算符: 1.分类: 2.java中的运算符 (1)其中,++在左,表示先加了再用,++在右,表示先用了再加. (2)% 用来求余数,也称为"取模运算符" 3.赋值运算符 4. ...

  2. Quick-Cocos2dx 快速了解

    set_dev_envirment // */ // ]]> Cocos2dx快速了解 1. Quick-Cocos2dx 开发环境搭建 1.1. 官网: 1.2. Github: 1.3. s ...

  3. Centos系统上安装VNC view

    一.安装 VNC 默认情况下,CentOS 6.4 是没有安装的,检查是否安装,输入: [root@localhost ~]# rpm -q vnc vnc-server package vnc is ...

  4. 1140 分珠 dfs

    时间限制:500MS  内存限制:65536K提交次数:24 通过次数:18 题型: 编程题   语言: G++;GCC Description 如下图所示,有若干珠子,每颗珠子重量不同,珠子之间有一 ...

  5. Linux 命令集合

    1.find /etc -name "*" | xargs grep "hello abcserver" 按照内容过滤2.grep -v "^#&qu ...

  6. Python基础2- Hello,world

    第一个程序Hello,world! 交互式编程:在终端窗口中输入:python回车后直接进入python交互模式,然后在提示符>>>后面输入:print 'Hello,world!' ...

  7. POJ1815 Friendship（字典序最小最小割割边集）

    看了题解.当时也觉得用邻接矩阵挺好写的,直接memset:然而邻接矩阵不懂得改,于是就放开那个模板,写了Dinic.. 方法是,按字典序枚举每一条满流的边,然后令其容量减1,如果最大流改变了,这条边就 ...

  8. Mvc网站发布到IIS

    网站发布步骤: 这部分是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接 ...

  9. R AnalyticFlow---R的流程图

    0.简介 R AnalyticFlow是一款利用R环境作为统计计算的数据分析软件,创作者是日本人,版权属于日本Ef-prime公司.R AnalyticFlow除了拥有直观的用户界面和流程图显示,它还 ...

  10. BZOJ2629 : binomial

    根据Lucas定理,等价于在$P$进制下每一位分别求组合数最后乘积模$P$. 因为答案为$0$的并不好算,所以可以考虑用$n+1$减去其它所有的答案. 那么每一位的组合数都不能是$0$,那么这就保证了 ...