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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 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
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
如何清空python的变量
2020/07/05 Python
俄罗斯女装店:12storeez
2019/10/25 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
运动会演讲稿200字
2014/08/25 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
教师个人事迹材料
2014/12/17 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js