首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

Posted in Javascript onDecember 08, 2016

Bootstrap自带了很多JQuery插件，给用户做前端开发提供了很大的方便。对于每一个插件，有2种引用方式：一是单独引用，即使用Bootstrap的单独*.js文件，这种方式需要注意的是一些插件和CSS组件可能依赖其他插件，所以单独引用的时候，需要弄清楚这种包含关系一并引用；二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js，需要注意的是不能同时引用这2个文件。

Bootstrap自带了很多基本的插件，包括模态对话框、标签切换、Tooltip提示工具等。首先来总结下模态对话框的使用。

0x01基本样式

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。Bootstrap Modals（模态框）是使用定制的JQuery插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。
下面是一个基本样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>模态对话框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>模态对话框基本</h1>
 </div>
 <button type="button" id="Open" class="btn btn-primary btn-lg btn-mymodal" data-toggle="modal"
   data-target="#myModal">
  打开模态框
 </button>
 <div class="modal fade" id="myModal" 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">标题</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>
  </div>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之模态对话框(16)

几点说明：

（1）使用模态窗口，需要有某种触发器，可以使用按钮或链接。这里我们使用的是按钮。
（2）data-target="#myModal" 是想要在页面上加载的模态框的目标。
（3）在模态框中需要注意两点：一是.modal，用来把 <div> 的内容识别为模态框；二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
（4）<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
（5）class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
（6）data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
（7）class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
（8）class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
（9）data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

0x02 JS方式加载

除了上面通过属性方式加载外，还可以通过JS方式加载模态对话框，下面是一个用户登录界面的简单实现：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <style>
  .col-center-block{
   float: none;
   display: block;
   margin-left: auto;
   margin-right: auto;
  }
 </style>
 <title>js加载例子</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>js加载模态对话框</h1>
 </div>
 <div>
  <button type="button" class="btn btn-lg btn-primary btn-myModal" data-toggle="modal">弹出对话框</button>
  <div id="myModal" class="modal fade">
   <div class="modal-dialog" style="width: 20%">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">用户登录</h4>
     </div>
     <div class="modal-body">
      <div>
       <form>
        <div class="form-group">
         <label class="control-label" for="UserName">用户名</label>
         <input type="text" class="form-control" id="UserName" placeholder="用户名">
        </div>
        <div class="form-group">
         <label class="control-label" for="Password">密码</label>
         <input type="password" class="form-control" id="Password" placeholder="密码">
        </div>
        <div class="form-group">
         <label>
          <input type="checkbox"> 下次自动登录
         </label>
         <a href="#" class="pull-right">忘记密码</a>
        </div>
        <div class="form-group">
         <button type="submit" class="btn btn-primary form-control">登录</button>
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<script>
 $(function () {
  $(".btn-myModal").click(function () {
   $("#myModal").modal({
    keyboard:true,
//    remote:"../Alerts.html"
   })
  })
  $("#myModal").on("hidden.bs.modal",function () {
//   alert('test');
  })
 })
</script>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之模态对话框(16)

上面的例子包含了JS加载modal的过程，也包括了设置模态对话框宽度、响应事件等内容。modal方法结合一些参数来实现特殊效果：

（1）把内容作为模态框激活。接受一个可选的选项对象：

$("#myModal").modal({
keyboard:true,
})

（2）状态切换

$("#myModal").modal('toggle') //手动打开模态框。
$("#myModal").modal('hide') //手动隐藏模态框。

0x03 事件

Bootstrap模态对话框还定义了事件，通过“钩子”的方式调用：

（1）show.bs.modal
在调用 show 方法后触发：

$('#myModal').on('show.bs.modal', function () {
 // 执行一些动作...
})

（2）shown.bs.modal
当模态框对用户可见时触发（将等待 CSS 过渡效果完成）：

$('#myModal').on('shown.bs.modal', function () {
// 执行一些动作...
})

（3）hide.bs.modal
当调用 hide 实例方法时触发：

$('#myModal').on('hide.bs.modal', function () {
 // 执行一些动作...
})

（4）hidden.bs.modal
当模态框完全对用户隐藏时触发：

$('#myModal').on('hidden.bs.modal', function () {
 // 执行一些动作...
})

上面用户登录的例子中事件部分代码：

$("#myModal").on("hidden.bs.modal",function () {
  alert('test');
 })

当模态框完全对用户隐藏时，就会调用执行这段JS代码。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本插件学习笔记之模态对话框(16)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
jquery实现异步加载图片（懒加载图片一种方式）
Apr 24 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
js 计算图片内点个数的示例代码
Apr 04 Javascript
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
Nov 21 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 #Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 #Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
delete in(1) 字段分割(1) 控制流(1) Hadoop(1) 九宫格(5) 表结构(1) Simhash(1) group by(1) 查询效率(1) REGEXP(1)
You might like
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
php微信公众平台开发（三）订阅事件处理
2016/12/06 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Add a Table to a Word Document
2007/06/15 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
浅谈对于“不用setInterval，用setTimeout”的理解
2019/08/28 Javascript
js实现打字小游戏
2019/12/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
详解Python多线程
2016/11/14 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python实现自动登录
2018/09/17 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python socket 套接字实现通信详解
2019/08/27 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
Omio法国：全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
历史系毕业生自荐信
2013/10/28 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
迟到检讨书范文
2015/01/27 职场文书