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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
原生JS生成指定位数的验证码
Oct 28 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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
javascript读取RSS数据
2007/01/20 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
python lambda的使用详解
2021/02/26 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
列车长先进事迹材料
2014/01/25 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
师德演讲稿范文
2014/05/06 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
高一地理教学工作总结
2015/08/12 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫