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 相关文章推荐
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
jquery密码强度校验
Dec 02 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
jquery css实现流程进度条
Mar 26 jQuery
使用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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php debug 安装技巧
2011/04/30 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP生成随机密码类分享
2014/06/25 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
js实现抽奖效果
2017/03/27 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
django 自定义用户user模型的三种方法
2014/11/18 Python
Python实现带百分比的进度条
2016/06/28 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python中图像通道分离与合并实例
2020/01/17 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
共产党员岗位承诺书
2014/05/29 职场文书
学校教师培训工作总结
2015/10/14 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL