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 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
vue实现的下拉框功能示例
Jan 29 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
phpize的深入理解
2013/06/03 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
javascript String 对象
2008/04/25 Javascript
asm.js使用示例代码
2013/11/28 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python实现简单登陆流程的方法
2018/04/22 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python装饰器知识点补充
2018/05/28 Python
Python logging设置和logger解析
2019/08/28 Python
python实现人机五子棋
2020/03/25 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
Python操作Excel的学习笔记
2021/02/18 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
工作中个人的自我评价
2013/12/31 职场文书
跳蚤市场口号
2014/06/13 职场文书
关于教师节的广播稿
2014/09/10 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
法律讲堂观后感
2015/06/11 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python