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面象对象设计
Apr 28 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
概述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下通过file_get_contents的代理使用方法
2011/02/16 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
windows下python连接oracle数据库
2017/06/07 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
解决python运行启动报错问题
2020/06/01 Python
python判断是空的实例分享
2020/07/06 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
趣味比赛活动方案
2014/02/15 职场文书
电工工作职责范本
2014/02/22 职场文书
运动会班级口号
2014/06/09 职场文书
三方股份合作协议书
2014/10/13 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
大学学生个人总结
2015/02/15 职场文书