Bootstrap 过渡效果Transition 模态框(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 过渡效果Transition 模态框(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 过渡效果Transition 模态框(Modal)

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

Javascript 相关文章推荐
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 #Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 #Javascript
javascript 动态生成css代码的两种方法
Mar 17 #Javascript
AngularJS中$http使用的简单介绍
Mar 17 #Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 #Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 #Javascript
Bootstrap表格制作代码
Mar 17 #Javascript
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Javascript之高级数组API的使用实例
2019/03/08 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
在Python中处理XML的教程
2015/04/29 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
python 链接和操作 memcache方法
2017/03/04 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python关闭占用端口方式
2019/12/17 Python
如何提高python 中for循环的效率
2020/04/15 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
eBay德国站:eBay.de
2017/09/14 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
年度考核自我评价
2014/01/25 职场文书
大学生个人自荐信
2014/02/24 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
交通安全学习心得体会
2016/01/18 职场文书