<!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. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  2. Linux内核创建一个新进程的过程

    “平安的祝福 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ” 进程在 ...

  3. mysql replace into用法与坑

    需要主键一致 PRIMARY KEY (id) PRIMARY KEY (id, ts) 坑: https://blog.xupeng.me/2013/10/11/mysql-replace-into ...

  4. asp.net权限控制配置web.config

    项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> ...

  5. hdu3709 Balanced Number (数位dp+bfs)

    Balanced Number Problem Description A balanced number is a non-negative integer that can be balanced ...

  6. 《DSP using MATLAB》 示例Example4.1

    今天开始看第4章,从开始看这本书到现在,过去一个多月,收获不少,继续坚持.

  7. 【Clr in c#】方法

    1. 引用类型(class)与值类型(strust)的构造函数(实例构造器) 1,  创建一个引用类型的实例时,首先为实例的数据字段分配内存,然后初始对象的附加字段,最后调用实例构造器来设置对象的初始 ...

  8. Python基础5- 运算符

    Python的运算符和其他语言的类似,主要有:算术运算符.比较运算符.逻辑运算符.赋值运算符.成员运算符.位运算符 ----------------------------------------算术 ...

  9. memcached启动脚本以及telnet测试

    memcached -m 1024 -u root -p 11211 -c 1024 -P /var/memcached.pid -d memcached 1.2.2 -p <num> T ...

  10. The 2015 China Collegiate Programming Contest E. Ba Gua Zhen hdu 5544

    Ba Gua Zhen Time Limit: 6000/4000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total ...