编程 Javascript

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

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

Bootstrap模态框（Modal）实现过渡效果

- Author -

boonyaxnn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

flash调用js中的方法,让js传递变量给flash的办法及思路

Aug 07 Javascript

Javascript实现字数统计

Jul 03 Javascript

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

Jun 02 Javascript

json的使用小结

Jun 08 Javascript

js判断价格,必须为数字且不能为负数的实现方法

Oct 07 Javascript

浅谈Node Inspector 代理实现

Oct 19 Javascript

vue iview实现动态路由和权限验证功能

Apr 17 Javascript

深入浅析AngularJs模版与v-bind

Jul 06 Javascript

读懂CommonJS的模块加载

Apr 19 Javascript

运用js实现图层拖拽的功能

May 24 Javascript

vue实现简单的日历效果

Sep 24 Javascript

关于angular引入ng-zorro的问题浅析

Sep 09 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