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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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
杏林同学录(六)
2006/10/09 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
python2.7到3.x迁移指南
2018/02/01 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
银行存款证明样本
2014/01/17 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2014年环保局工作总结
2014/12/11 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
九不准学习心得体会
2016/01/23 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python