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 Object.extend
May 18 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
常规表格多表头查询示例
Feb 21 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
JavaScript实现网页计算器功能
Oct 29 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
中国的第一台收音机
2021/03/01 无线电
?算你??的 PHP 程式大小
2006/12/06 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
python实现学生通讯录管理系统
2021/02/25 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
干部下基层实施方案
2014/03/14 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
党员个人党性分析材料
2014/12/18 职场文书
护士年终考核评语
2014/12/31 职场文书
无保留意见审计报告
2015/06/05 职场文书
焦点访谈观后感
2015/06/11 职场文书