首页
所有分类
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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
使用堆实现Top K算法（JS实现）
Dec 25 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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
OpenFeign(1) Windows Server(4) SandBox(1) Windows Server 2022(3) RestTemplate(1) K8s(1) Hive(5) HttpClient(1) calc(1) NTP(1)
You might like
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
百度工程师讲PHP函数的实现原理及性能分析（三）
2015/05/13 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PDO::errorInfo讲解
2019/01/28 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
Node.js实现文件上传
2016/07/05 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
C#笔试题集合
2013/06/21 面试题
校园文化建设方案
2014/02/03 职场文书
医德医风演讲稿
2014/05/20 职场文书
出纳工作检讨书
2014/10/18 职场文书
追讨欠款律师函
2015/05/27 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
祝福语集锦：送给毕业同学祝福语
2019/11/21 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Nginx HTTP跳转至HTTPS
2022/05/15 Servers