Bootstrap模态框(Modal)实现过渡效果


Posted in Javascript onMarch 17, 2017

可以切换模态框(Modal)插件的隐藏内容:

1、通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" rel="external nofollow" 来指定要切换的特定的模态框(带有 id="identifier")

2、通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)

代码:

<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap-模态框Modal</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 

</head> 
<body> 
<div class="container"> 
<h2>创建模态框(Modal)</h2> 
<!-- 按钮触发模态框 --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> 
<!-- 模态框(Modal) --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button> 
<h4 class="modal-title" id="myModalLabel"> 模态框(Modal)标题 </h4> 
</div> 
<div class="modal-body"> 
在这里添加一些文本 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default"data-dismiss="modal">关闭</button> 
<button type="button" class="btn btn-primary">提交更改</button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal --> 
</div> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Bootstrap模态框(Modal)实现过渡效果

注:
aria-labelledby="myModalLabel" aria-hidden="true"

官方API 意思是为盲人或者一些可读设备设置的 role的设置告诉设备这是弹出框 aria-labelledby=".."里面是描述信息,然后aria-hidden="true"再把它隐藏掉,一般人用不到,这样写比较规范

增强模态框的可访问性

务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性,用于指向模态框的标题栏;为 .modal-dialog 添加 aria-hidden="true" 属性。

另外,你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

效果图

Bootstrap模态框(Modal)实现过渡效果

参考地址:http://www.w3cschool.cn/bootstrap/bootstrap-modal-plugin.html

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

Javascript 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
vue计算属性及使用详解
Apr 02 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
详解Vue.js入门环境搭建
Mar 17 #Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
基于bootstrap实现收缩导航条
Mar 17 #Javascript
javascript基本数据类型和转换
Mar 17 #Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 #Javascript
js实现一键复制功能
Mar 16 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
go语言计算两个时间的时间差方法
2015/03/13 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
vscode 远程调试python的方法
2017/12/01 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
店长岗位的工作内容
2013/11/12 职场文书
土木工程师岗位职责
2013/11/24 职场文书
小学新教师培训方案
2014/02/03 职场文书
结对共建工作方案
2014/06/02 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2014年保洁工作总结
2014/11/24 职场文书
求职推荐信范文
2015/03/27 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫