bootstrap模态框示例代码分享


Posted in Javascript onMay 17, 2017

本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下

<!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, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
 <link rel="stylesheet" href="css/main.css"> 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
<!--默认隐藏--> 
<!--模态框声明--> 
<div class="modal"> 
 <!--模态框窗口声明--> 
 <div class="modal-dialog"> 
  <!--内容声明--> 
  <div class="modal-content"> 
   aaaaa 
  </div> 
 </div> 
</div> 
<!--显示--> 
<!--模态框声明--> 
<!--<div class="modal show"> 
 <!?模态框窗口声明?> 
 <div class="modal-dialog"> 
  <!?内容声明?> 
  <div class="modal-content"> 
   aaaaa 
  </div> 
 </div> 
</div>--> 
<!--显示,加上头,主体和底部--> 
<!--模态框声明--> 
<!--<div class="modal show"> 
 <!?模态框窗口声明?> 
 <div class="modal-dialog"> 
  <!?内容声明?> 
  <div class="modal-content"> 
   <div class="modal-header"> 
    头 
   </div> 
   <div class="modal-body"> 
    主体 
   </div> 
   <div class="modal-footer"> 
    底部 
   </div> 
  </div> 
 </div> 
</div>--> 
<!--不显示(点击按钮再显示),加上头,主体和底部,加上其他内容--> 
<!--模态框声明--> 
<!--<div class="modal" id="myModal" tabindex="-1">-->
<!--加上tabindex后,点击ESC也能关闭模态框--> 
<div class="modal fade" id="myModal" tabindex="-1">
<!--加上fade后具有淡入淡出效果--> 
 <!--模态框窗口声明--> 
 <!--<div class="modal-dialog">--> 
 <div class="modal-dialog modal-lg"><!--可以调整大小--> 
  <!--内容声明--> 
  <div class="modal-content"> 
   <div class="modal-header"> 
    <!--关闭按钮--> 
    <button class="close" data-dismiss="modal"><!--可以关闭模态框--> 
     <span>×</span> 
    </button> 
    <!--头部标题--> 
    <h4 class="modal-title">登录</h4> 
   </div> 
   <div class="modal-body"> 
    <!--<p>暂时无法注册</p>--> 
    <div class="container-fluid"><!--在模态框主体部分还可以加入流体的栅格系统,一定是流体--> 
     <div class="row"> 
      <div class="col-lg-4 col-md-4 col-sm-6">haha</div> 
      <div class="col-lg-4 col-md-4 col-sm-6">hehe</div> 
      <div class="col-lg-4 col-md-4 col-sm-6">heihei</div> 
     </div> 
    </div> 
   </div> 
   <div class="modal-footer"> 
    <button class="btn btn-default">注册</button> 
    <button class="btn btn-primary">登录</button> 
   </div> 
  </div> 
 </div> 
</div> 
<!--需要指定模态框的id--> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出完整模态框</button> 
<!--也可以使用方法a标签,data-target可以换成href--> 
<a class="btn btn-primary" data-toggle="modal" href="#myModal">点击弹出完整模态框</a> 
<!--data-backdrop默认是true,效果跟上面一样,如果是false,模态框背景无黑灰色,且点击空白处不会关闭模态框--> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="false"> 
 点击弹出完整模态框 
</button> 
<!--data-backdrop默认是true,效果跟上面一样,如果是static,模态框背景有黑灰色,但是点击空白处不会关闭模态框--> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static"> 
 点击弹出完整模态框 
</button> 
<!--data-keyboard默认是true,即按Esc可以关闭模态框,如果是false,就不能关闭--> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false"> 
 点击弹出完整模态框 
</button> 
<!--href通过指定远程html文件即可远程加载内容到data-target="#myModal"模态框,远程中要加入header和footer--> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="模态框远程.html"> 
 远程加载弹出完整模态框 
</button> 
<!----> 
<button class="btn btn-primary" id="btn"> 
 jQuery实现弹出完整模态框 
</button> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
 $('#btn').on('click', function () { 
  $('#myModal').modal('show'); 
 }); 
// $('#myModal').modal({});如果不给参数,默认一打开浏览器就会弹出模态框 
 $('#myModal').modal({ 
  show:false,   /*如果不给参数,默认一打开浏览器就会弹出模态框,所以一开始不让它显示*/ 
  /*其他参数跟上面按钮中data-后面的一样*/ 
  remote:'模态框远程.html' /*远程加载*/ 
 }); 
 
 $('#myModal').on('show.bs.modal', function () { 
  alert('当模态框出现之前,触发该事件'); 
 }); 
 $('#myModal').on('shown.bs.modal', function () { 
  alert('当模态框出现之后,触发该事件'); 
 }); 
 $('#myModal').on('hide.bs.modal', function () { 
  alert('当模态框关闭之前,触发该事件'); 
 }); 
 $('#myModal').on('hidden.bs.modal', function () { 
  alert('当模态框关闭之后,触发该事件'); 
 }); 
 $('#myModal').on('loaded.bs.modal', function () { 
  alert('从远端的数据源加载完数据之后触发该事件');/*远程加载不是点击之后加载,默认页面加载完成后就已经加载好了*/ 
 }); 
</script> 
</body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
ES6入门教程之let和const命令详解
May 17 #Javascript
详解如何在Angular中快速定位DOM元素
May 17 #Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 #Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 #Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
AngularJS使用拦截器实现的loading功能完整实例
May 17 #Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
实例解析Array和String方法
2016/12/14 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
简单谈谈Python流程控制语句
2016/12/04 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
详解Python中的Lock和Rlock
2021/01/26 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
职工培训工作总结
2015/08/10 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python