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文件缓存的代码
Apr 09 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
js分页工具实例
Jan 28 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
实用函数2
2007/11/08 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Python 通过URL打开图片实例详解
2017/06/01 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
十佳美德少年事迹材料
2014/02/05 职场文书
项目采购员岗位职责
2014/04/15 职场文书
小学体育组工作总结
2015/08/13 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python