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 相关文章推荐
JavaScript事件委托技术实例分析
Feb 06 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
Vue按需加载的具体实现
Dec 02 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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
自定义session存储机制避免会话保持问题
2014/10/08 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Python入门教程之if语句的用法
2015/05/14 Python
python:动态路由的Flask程序代码
2019/11/22 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
浅析matlab中imadjust函数
2020/02/27 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
小学班主任研修日志
2015/11/13 职场文书