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个精彩的专题:

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

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
原生js+css实现tab切换功能
Sep 17 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
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
node实现的爬虫功能示例
2018/05/04 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python使用urlparse分析网址中域名的方法
2015/04/15 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
大学生工作推荐信范文
2013/12/02 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Python实现简单得递归下降Parser
2022/05/02 Python