bootstrap模态框示例代码分享

本文实例为大家分享了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>

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

(0)

相关推荐

  • 浅析BootStrap模态框的使用(经典)

    BootStrap模态框简单概述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 1,Bootstrap 模态对话框和简单使用 div id="myModal" class="modal hide fade"> <div class="modal-he

  • 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 复制代码 代码如下: .cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px

  • bootstrap模态框消失问题的解决方法

    小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打

  • Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

  • BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路: 1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加载页放置一个时间控件,测试通过 3,在模态框最外层放置一个时间控件,不通过 主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bo

  • BOOTSTRAP时间控件显示在模态框下面的bug修复

    一针见血:修改 bootstrap-datepicker.js 文件 复制代码 代码如下: var zIndex = parseInt(this.element.parents().filter(function(){      return $(this).css('z-index') !== 'auto';     }).first().css('z-index'))  +10; 将+10改为+99999999; 原因:z-index是设置元素的堆叠顺序,从负到正表示从下到上堆叠,这里使用c

  • Bootstrap模态框调用功能实现方法

    近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi

  • Bootstrap模态框禁用空白处点击关闭

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不

  • Bootstrap每天必学之模态框(Modal)插件

    本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

  • 浅析BootStrap中Modal(模态框)使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

随机推荐