Bootstrap模态框插件使用详解


Posted in Javascript onMay 11, 2017

本文主要学习Bootstrap 中的模态框插件,这是一款交互式网站非常常见的弹窗功能插件。

1.基本使用

使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面,还有三层,分别为 header(头部)、body(主体)、footer(注脚)。

结合具体演示来理解如下内容:

<!-- 模态框的声明 class="modal show" 显示模态框 fade淡入淡出效果-->
 <div class="modal fade" id="myModal" tabindex="-1"> <!-- id:设置id定位, tabindex: 设置取消 -->
  <!-- 模态框窗口的声明 -->
  <div class="modal-dialog modal-lg"> <!-- modal-lg,sm 设置模态框大小 -->
   <!-- 内容声明 -->
   <div class="modal-content">
    <!-- 模态框头部 -->
    <div class="modal-header">
     <!-- 关闭按钮(在没有show的情况下才能关闭) -->
     <button class="close" data-dismiss="modal"><span>×</span></button> 
     <h4 class="modal-title">会员登录</h4>
    </div>
    <!-- 模态框主体 -->
    <div class="modal-body">
     <!-- <p>暂时无法服务</p> -->
     <!-- 在主体部分使用栅格系统中的流体 -->
     <div class="container-fluid">
      <div class="row">
       <div class="col-sm-4">1</div>
       <div class="col-sm-4">2</div>
       <div class="col-sm-4">3</div>
      </div>
     </div>
    </div>
    <!-- 模态框注脚(默认居右)-->
    <div class="modal-footer">
     <button class="btn btn-default">注册</button>
     <button class="btn btn-primary">登录</button>
    </div>
   </div>
  </div>
 </div>

 <!-- 点击触发模态框 data-toggle:表明点击是一个模态框的弹窗类型,
  data-target:定位到指定的模态框节点data-target可以换成href
  -->
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹窗</button>

 <!--使用插件其它方法时的设置-->
 <!-- <button class="btn btn-primary" id="btn" > -->

2.插件的用法

所有的插件,都是基于JavaScript/jQuery 的。

有四个要素:用法、参数、方法和事件。

1. 用法

第一种:可以通过 data 属性

data-toggle="modal" data-target="#myModal"

data-toggle 表示触发类型

data-target 表示触发的节点

如果不是使用<button>,而是<a>,其中 data-target 也可以使用 href=”#myModal”取代。建议使用 data-target。

除了 data-toggle 和 data-target 两个声明属性外,还有一些可以用选项。

2. 参数

可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

Bootstrap模态框插件使用详解

空白背景且点击不关闭 : data-backdrop=”false”

按下 esc 不关闭 : data-keyboard=”false”

初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示 : data-show=”false”

加载一次 index.html 到容器内 : href=”index.html”

也可以在 JavaScript 直接设置

Bootstrap模态框插件使用详解

//通过 jQuery 方式声明

$('#myModal').modal({
 show : true,
 backdrop : false,
 keyboard : false,
 remote : 'index.html',
});

3. 方法

如果默认不显示弹窗,通过点击前后弹窗的实现

Bootstrap模态框插件使用详解

//点击显示弹窗

$('#btn').on('click', function () {
 $('#myModal').modal('show');
});

4. 事件

模态框支持 4 种时间,分别对应弹出前、弹出后、关闭前和关闭后。

Bootstrap模态框插件使用详解

$('#myModal').on('show.bs.modal', function () {
 alert('在 show 方法调用时立即触发!');
});

$('#myModal').on('shown.bs.modal', function () {
 alert('在模态框显示完毕后触发!');
});

$('#myModal').on('hide.bs.modal', function () {
 alert('在 hide 方法调用时立即触发!');
});

$('#myModal').on('hiden.bs.modal', function () {
 alert('在模态框显示完毕后触发!');
});

$('#myModal').on('loaded.bs.modal', function () {
 alert('远程数据加载完毕后触发!');
});

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

Javascript 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JS重要知识点小结
Nov 06 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
canvas实现弧形可拖动进度条效果
May 11 #Javascript
es6学习笔记之Async函数的使用示例
May 11 #Javascript
Node.js安装配置图文教程
May 10 #Javascript
使用bootstrap插件实现模态框效果
May 10 #Javascript
详解Vue用axios发送post请求自动set cookie
May 10 #Javascript
Node.js 异步异常的处理与domain模块解析
May 10 #Javascript
基于Node的React图片上传组件实现实例代码
May 10 #Javascript
You might like
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python友情链接检查方法
2015/07/08 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python中open函数的基本用法示例
2019/09/07 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
python如何基于redis实现ip代理池
2020/01/17 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
如何一键升级Python所有包
2020/11/05 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
网络教育自我鉴定
2014/02/04 职场文书
小学语文教学反思
2014/02/10 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
司机职责范本
2014/03/08 职场文书
小学作文评语大全
2014/04/21 职场文书
法人委托书的范本格式
2014/09/11 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
离职信范文
2015/06/23 职场文书
关于幸福的感言
2015/08/03 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers