BootStrap中的模态框(modal,弹出层)功能示例代码


Posted in Javascript onNovember 02, 2018

bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能。

BootStrap中的模态框(modal,弹出层)功能示例代码

默认的modal示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap Modal</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
   </div>
   <div class="modal-body">
    <p>One fine body…</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save</button>
   </div>
  </div>
 </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

为 .modal 添加 role="dialog",用于指定模态框为对话框。为 .modal-dialog 添加 aria-hidden="true" 属性。通过 aria-describedby 属性为模态框 .modal 添加描述性信息。关闭动画如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。

通过按钮属性显示不同内容当有一堆按钮,都要触发相同的模态框(如:向好友列表中某个人发消息),只是有用户ID不同,那么可以使用data-whatever配合event.relatedtarget来实现:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap Modal</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
 <div class="panel-heading">好友列表</div>
 <div class="panel-body">
  <div class="list-group" role="group" aria-label="好友列表">
   <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
     data-whatever="张三">张三
   </button>
   <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
     data-whatever="李四">李四
   </button>
   <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
     data-whatever="王二">王二
   </button>
  </div>
 </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
      aria-hidden="true">×</span></button>
    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
   </div>
   <div class="modal-body">
    <form>
     <div class="form-group">
      <label for="recipient-name" class="control-label">Recipient:</label>
      <input type="text" class="form-control" id="recipient-name">
     </div>
     <div class="form-group">
      <label for="message-text" class="control-label">Message:</label>
      <textarea class="form-control" id="message-text"></textarea>
     </div>
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Send message</button>
   </div>
  </div>
 </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
 $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // 触发事件的按钮
  var recipient = button.data('whatever') // 解析出data-whatever内容
  var modal = $(this)
  modal.find('.modal-title').text('Message To ' + recipient)
  modal.find('.modal-body input').val(recipient)
 })
</script>
</body>
</html>

通常不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal" 属性,或者 data-target="#foo" 属性,再或者 href="#foo" rel="external nofollow" 属性,用于指向被控制的模态框。通过JavaScript调用modal通常只需一行 JavaScript 代码,即可通过元素的 id myModal 调用模态框:

$('#myModal').modal(options)

JavaScript参数:

可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性,需要将参数名称放到 data- 之后,例如 data-backdrop=""。

BootStrap中的模态框(modal,弹出层)功能示例代码

调用示例

1.将页面中的某块内容作为模态框激活。

接受可选参数 object。

$('#myModal').modal({
 keyboard: false
})

2.手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。$('#myModal').modal('toggle')
3.手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。$('#myModal').modal('show')
4.手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。$('#myModal').modal('hide')
5.更新模态框,在模态框动态添加或删除内容时:$('#myModal').modal('handleUpdate')

绑定事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

BootStrap中的模态框(modal,弹出层)功能示例代码

如:

$('#myModal').on('hidden.bs.modal', function (e) {
 // do something...
})

总结

以上所述是小编给大家介绍的BootStrap中的模态框(modal,弹出层)功能示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jquery indexOf使用方法
Aug 19 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
微信小程序日历效果
Dec 29 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 #Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 #Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jquery密码强度校验
2015/12/02 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
大型演出策划方案
2014/05/28 职场文书
学校重阳节活动总结
2015/03/24 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技