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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
vue实现将一个数组内的相同数据进行合并
Nov 07 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
js正则表达式简单校验方法
2021/01/03 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python 判断一个进程是否存在
2009/04/09 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
django model object序列化实例
2020/03/13 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
施工资料员岗位职责
2014/01/06 职场文书
大型晚会策划方案
2014/02/06 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
前台岗位职责
2015/02/13 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
Python预测分词的实现
2021/06/18 Python