首页
所有分类
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 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
微信小程序自定义组件
Aug 16 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
微信小程序入门之绘制时钟
Oct 22 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
Hash(1) 目录管理(1) html5+(1) 磁盘管理(1) 触发器(3) Vmware(3) RabbitMQ(3) 虚拟机(3) 入门基础(1) plus.io(1)
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php 网页游戏开发入门教程一（webgame+design）
2009/10/26 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
基于layui实现高级搜索（筛选）功能
2019/07/26 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
基于canvas实现手写签名（vue）
2020/05/21 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
使用Python读取大文件的方法
2018/02/11 Python
python ddt实现数据驱动
2018/03/14 Python
Python之list对应元素求和的方法
2018/06/28 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python实现壁纸下载与轮换
2020/10/19 Python
python 下载文件的多种方法汇总
2020/11/17 Python
C#里面可以避免一个类被其他类继承么？如何？
2013/09/26 面试题
小学清明节活动方案
2014/03/08 职场文书
学校门卫岗位职责
2014/03/16 职场文书
关于环保的演讲稿
2014/05/10 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
十佳党员事迹材料
2014/08/28 职场文书
自主招生英文自荐信
2015/03/25 职场文书
教师培训简讯
2015/07/20 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Python Pandas知识点之缺失值处理详解
2021/05/11 Python