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下4个跨浏览器必备的函数
Mar 07 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
编写v-for循环的技巧汇总
Dec 01 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php实现中文转数字
2016/02/18 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
利用python批量修改word文件名的方法示例
2017/10/17 Python
python构建深度神经网络(续)
2018/03/10 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
计算机操作自荐信
2013/12/07 职场文书
工作中个人的自我评价
2013/12/31 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
物理教育专业求职信
2014/06/25 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
销售内勤岗位职责
2015/02/10 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
goland 清除所有的默认设置操作
2021/04/28 Golang