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 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
js实现图片推拉门效果代码实例
May 18 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python3 合并二叉树的实现
2019/09/30 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
介绍一下#error预处理
2015/09/25 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
个人股份转让协议书范本
2014/10/26 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
意外事故赔偿协议书
2016/03/22 职场文书