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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Bootstrap模态框禁用空白处点击关闭
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不
-
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路: 1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加载页放置一个时间控件,测试通过 3,在模态框最外层放置一个时间控件,不通过 主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bo
-
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官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b
-
页面遮罩层，并且阻止页面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 Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 1,Bootstrap 模态对话框和简单使用 div id="myModal" class="modal hide fade"> <div class="modal-he
-
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中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
-
Bootstrap每天必学之模态框（Modal）插件
本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l
-
bootstrap模态框消失问题的解决方法
小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打