使用bootstrap插件实现模态框效果


Posted in Javascript onMay 10, 2017

今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用。

一. bootstrap 的 js 插件的简单介绍

1.引入

我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.min.js 是压缩后的版本。

我们在使用 bootstrap 的 js插件时不需要做更多的工作,只需要引入这两个文件中的一个就可以了,另外重要的信息是 bootstrap 的所有插件都依赖于 jquery 库,所以在引入 bootstrap 的插件时,必须先引入 jquery 库。

如果只使用 bootstrap库的 某个插件,所以不想引入全部插件时,可以选择单独引入某个插件。此种方法需要你有要使用的插件的单独文件,bootstrap 共有 12 个 js 插件,你可以到 github此处 下载使用每个插件的单独文件。

另外 bootstrap 有以下 12 个插件,大家可以大概做个了解:

  • 动画过渡(Transitions): transition.js
  • 模态弹窗(Modal): modal.js
  • 下拉菜单(Dropdown): dropdown.js
  • 滚动侦测(Scrollspy): scrollspy.js
  • 选项卡(Tab): tab.js
  • 提示框(Tooltips): tooltop.js
  • 弹出框(Popover): popover.js
  • 警告框(Alert): alert.js
  • 按钮(Buttons): button.js
  • 折叠/手风琴(Collapse): collapse.js
  • 图片轮播Carousel: carousel.js
  • 自动定位浮标Affix: affix.js

2.引入插件的使用

bootstrap 提供了一个非常方便的 API 来调用插件,那就是 data 属性 。我们不需要写很多 js 代码,只需要为 HTML 标签增加 data-* 属性,就可以调用 js 插件实现各种效果 。

例如我们想为按钮绑定 下拉菜单效果,只需要为按钮添加 data-toggle="dropdown" 属性,在点击按钮时,就会调用 dropdown 插件了。

当然我们也可以使用 bootstrap 提供的 纯javascript API 来调用插件,例如为 id 为 test 的 按钮绑定调用 dropdown 插件操作,可以使用如下的 js 代码:

$("#test").dropdown(option) /可带选项参数option

二.模态框插件

bootstrap 模态框插件是 modal.js 。使用的样式组件如下:

  • .modal               模态框
  • .modal-dialog    模态框主体
  • .modal-content 模态框内容
  • .modal-header  模态框内容头部(标题)
  • .modal-title        模态框标题
  • .modal-body     模态框内容主要内容部分
  • .modal-footer    模态框内容底部 (可放置操作按钮等)

一个模态框的结构类似如下

<h1>模态框是个值得学习的好效果</h1>
<button class="btn btn-success" data-toggle="modal" data-target="#modalone" data-show="false">come on!</button>
<div class="modal fade" id="modalone">
 <div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">
   <span aria-hidden="true">×</span>
  </button>
  <h4 class="modal-title">模态弹出窗标题</h4>
  </div>
  <div class="modal-body">
  <p>模态框主体</p>
  </div>
  <div class="modal-footer">
  <p style="display: inline-block;">模态框底部</p>
  <button class="btn btn-info">done</button>
  </div>
 </div>
 </div>
</div>
</div>

第一个按钮的 data-toggle="modal" 表示 此按钮为模态框的触发器,点击时弹出模态框。另外也可以使用 链接标签 <a> 的 href 属性代替 data-toggle 将链接<a> 作为触发器,但不推荐。

data-target="#modalone" 属性表示 触发的模态窗口 ID 为 modalone 。一个页面可以有多个模态窗口触发器,但是一个触发器只能触发对应的模态框,不能触发多个模态框。

以上两个 data 属性是实现模态框效果必须的。

fade 格式化类可以为模态框弹出添加过渡效果。

close 格式化类 和 data-dismiss 属性配合可以为模态框添加关闭按钮。

另外还有一些其他可选的 data 属性,可以增强模态框的表现效果。如下:

  • data-backdrop    是否包含一个背景 DIV 从而在单击背景时关闭模态框,属性值为 true 时 包含, 为 static 时不包含。
  • data-keyboard    为 true 时按下键盘 ESC 时模态框关闭,false时不关闭
  • data-show           为true时页面加载后不显示,为false时显示

通过 JS 代码调用插件带 选项参数 也可以达到与设置以上属性相同的效果,代码如下:

$(function () {
 $(".btn").click(function () {
  $("#modalone").modal({
   backdrop: false, // 相当于data-backdrop
   keyboard: false, // 相当于data-keyboard
   show: true, // 相当于data-show
   remote: "" // 相当于a标签作为触发器的href
  });
 });
});

最后,以上模态框代码效果如下:

未点击按钮时:

使用bootstrap插件实现模态框效果

点击后:

使用bootstrap插件实现模态框效果

一个简单的模态框效果就制作完成了。

三.补充

JS 代码调用插件, .modal() 方法的参数除了可以携带以上提及的 option 参数外,还可以有以下几个:

  • .modal('toggle') 手动切换模态框
  • .modal('show') 手动打开模态框
  • .modal('hide') 手动关闭模态框

同时,模态框插件还提供了以下几个钩子事件函数,可以在JS代码中使用来达到丰富模态框效果或添加更多功能的目的。

show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件relatedTarget事件
shown.bs.modal 该事件在模态窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件relatedTarget事件
hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发
hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并CSS动画漂亮完成之后)触发

以上所述是小编给大家介绍的使用bootstrap插件实现模态框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
JS async 函数的含义和用法实例总结
Apr 08 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 #Javascript
Node.js 异步异常的处理与domain模块解析
May 10 #Javascript
基于Node的React图片上传组件实现实例代码
May 10 #Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 #Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 #Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 #Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php生成略缩图代码
2012/07/16 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python基础教程之序列详解
2014/08/29 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python3大文件解压和基本操作
2017/12/15 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python tkinter模版代码实例
2020/02/05 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
教师求职推荐信范文
2013/11/20 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
朋友聚会开场白
2015/06/01 职场文书
安全守法证明
2015/06/23 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL