<!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. 获取内核当前执行模块和当前发生异常地址和线程异常Handler调用步骤

    循环每个内核模块 统计模块大小 判断触发异常的地址属于那个模块.来确定模块 获取发生异常地址 nt!_EXCEPTION_RECORD +0x000 ExceptionCode : -21391605 ...

  2. Arduino101学习笔记（六）—— 高级IO

    1.位移输出函数(8位) 输入value数据后Arduino会自动把数据移动分配到8个并行输出端. 其中dataPin为连接DS的引脚号, clockPin为连接SH_CP的引脚号, bitOrder ...

  3. 汇编学习（五）——表处理程序

    (一)串操作指令及重复前缀 一.串操作指令: 1.串传送指令: (1)指令格式: MOVS dst,rsc MOVSB ;ES:[DI]<--DS:[SI],SI<-SI+/-,DI< ...

  4. Android Studio 插件整理

    1.GsonFormat 快速将json字符串转换成一个Java Bean,免去我们根据json字符串手写对应Java Bean的过程. 使用方法:快捷键Alt+S也可以使用Alt+Insert选择G ...

  5. LOAD和PigStorage的一些测试例子 (转)

    原地址:http://f.dataguru.cn/thread-233064-1-1.htm 因为理解上的错误,在这里被搞糊涂了.通过做测试,应该算是澄清了,所以写出来. 假设有个文件叫test,该文 ...

  6. nefu558 bfs

    Description AC小公主很喜欢设计迷宫,她设计的迷宫只有两个口,一个入口,一个出口.但小公主有时候很调皮,她会让挑战者走不出迷宫.现在给你AC小公主的迷宫请你判断挑战者能否成功从出口走出迷宫 ...

  7. HDU 3374 最小/大表示法+KMP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题意:给定一个串s,该串有strlen(s)个循环同构串,要求输出字典序最小的同构串的下标,字典 ...

  8. 分享Kali Linux 2016.2第45周镜像

    分享Kali Linux 2016.2第45周镜像Kali Linux官方于11月6日发布Kali Linux 2016.2的第45周的镜像.此次镜像维持了以往11个镜像文件的规模,包括32位.64位 ...

  9. Java jar命令 常见用法

    一.jar命令作用: 进行打包 -- 把多个文件打包成一个压缩包 -- 这个压缩包和Winzip的压缩格式是一样的. 区别在于jar压缩的文件默认多一个META-INF的文件夹,该文件夹下包含一个Ma ...

  10. ural 1075. Thread in a Space

    1075. Thread in a Space Time limit: 1.0 secondMemory limit: 64 MB There are three points in a 3-dime ...