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 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
php实现的生成排列算法示例
2019/07/25 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
基于js中的原型(全面讲解)
2017/09/19 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python中去空格函数的用法
2014/08/21 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python实现单向链表详解
2018/02/08 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Flask-Mail用法实例分析
2018/07/21 Python
基于Python的PIL库学习详解
2019/05/10 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
研究生自荐信
2013/10/09 职场文书
品质主管岗位职责
2014/03/16 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript