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 相关文章推荐
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
详解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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
jQuery 动画基础教程
2008/12/25 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python向excel中写入数据的方法
2019/05/05 Python
python pillow模块使用方法详解
2019/08/30 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python speech模块的使用方法
2020/09/09 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
作文批改评语大全
2014/04/23 职场文书
课外访万家心得体会
2014/09/03 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
Python几种酷炫的进度条的方式
2022/04/11 Python