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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
actionscript与javascript的区别
May 25 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
小程序实现密码输入框
Nov 16 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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php编程每天必学之验证码
2016/03/03 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
js实现自动播放匀速轮播图
2020/02/06 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
python实现计算倒数的方法
2015/07/11 Python
Python类属性的延迟计算
2016/10/22 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python列表推导式入门学习解析
2019/12/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
教师应聘个人求职信
2013/12/10 职场文书
建筑个人求职信范文
2014/01/25 职场文书
合同纠纷调解书
2015/05/20 职场文书
债务纠纷代理词
2015/05/25 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记