版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39680839/article/details/78203528
JQuery模拟boostrap模态框效果
1、单个模态框代码案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单个模态框</title>
<meta name="description" content="简介">
<meta name="keywords" content="关键字">
<!--<script src="js/jquery-1.9.1.min.js"></script>-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
*{ margin:0; padding:0;}
.model {
width:350px;
height:300px;
box-shadow:0 0 10px rgba(0,0,0,.4);
border-radius:8px;
padding:1em;
padding-top:0;
position:fixed;
z-index:100;
background-color:#fff;
display:none;
}
.model-header {
border-bottom:1px solid #eaeaea;
height:35px;
line-height:35px;
text-align:center;
}
.close{
position:absolute;
top:0;
right:15px;
height:35px;
line-height:35px;
text-align:center;
display:block;
color:#666;
cursor:pointer;
}
.close:hover{
color:#A30D10;
}
.mask{
background-color:#000;
width:100%;
height:100%;
opacity:.3;
filter:alpha(opacity=30);
position:absolute;
left:0;
top:0;
z-index:0;
display:none;
}
</style>
</head>
<body>
<div><a href="javascript:;" class="open">登陆</a></div>
<div class="model">
<div class="model-header">
<h3>弹出标题</h3>
<span class="close">×</span>
</div>
<div class="model-body">弹出内容 </div>
<div class="model-footer"></div>
</div>
<div class="mask"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script type="text/javascript">
$(function(){
$(".open").click(function(){
showModel();
});
function showModel(){
var wW=$(window).width(); //浏览器可视区域宽度和高度
var wH=$(window).height();
var oW=$(".model").innerWidth(); //获取类叫model的宽度和高度
var oH=$(".model").innerHeight();
$(".model").show().css({"top":(wH-oH)/2+"px","left":(wW-oW)/2+"px"});
$(".mask").fadeIn();
}
$(window).resize(function(){
if($(".model").is(":visible")){ //弹出框必须可见后 才能调用showModel()
showModel();
}
});
$(".close").click(function(){
$(".model").hide();
$(".mask").fadeOut();
});
$(document).keydown(function(ev){
if(ev.keyCode==27){ //当按下键盘Esc时===》close关闭按钮
// $(".model").hide();
// $(".mask").fadeOut();
$(".close").trigger("click");//trigger("事件名") 模拟事件
}
})
});
</script>
</html>效果图如下：点击登录后模态框出现，模态框随着窗口移动而移动（不是固定在页面）
2、多个模态框案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多个模态框</title>
<meta name="description" content="简介">
<meta name="keywords" content="关键字">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
*{ margin:0; padding:0;}
.model{
width:350px;
height:300px;
box-shadow:0 0 10px rgba(0,0,0,.4);
border-radius:8px;
padding:1em;
padding-top:0;
position:fixed;
z-index:100;
background-color:#fff;
display:none;
}
.model-header{
border-bottom:1px solid #eaeaea;
height:35px;
line-height:35px;
text-align:center;
}
.close{
position:absolute;
top:0;
right:15px;
height:35px;
line-height:35px;
text-align:center;
display:block;
color:#666;
cursor:pointer;
}
.close:hover{
color:#A30D10;
}
.mask{
background-color:#000;
width:100%;
height:100%;
opacity:.3;
filter:alpha(opacity=30);
position:absolute;
left:0;
top:0;
z-index:0;
display:none;
}
</style>
</head>
<body>
<div>
<a href = "javascript:;" class = "open" a = ".model1">注册1</a>
<a href = "javascript:;" class = "open" a = ".model2">登录2</a>
</div>
<div class="model model1">
<div class="model-header">
<h3>弹出标题</h3>
<span class="close">×</span>
</div>
<div class="model-body">注册1 弹出内容 </div>
<div class="model-footer"></div>
</div>
<div class="model model2">
<div class="model-header">
<h3>弹出标题2</h3>
<span class="close">×</span>
</div>
<div class="model-body">登录2 弹出内容</div>
<div class="model-footer"></div>
</div>
<div class="mask"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script type="text/javascript">
$(function(){
$(".open").click(function(){
pop($(this));
});
function pop(b){
var elem = $(b.attr("a")); //$(".model1") $(".model2")
// b.attr("a") === >.model1 .model2
showModel();
function showModel(){
var wW = $(window).width(); //浏览器可视区域宽度和高度
var wH = $(window).height();
var oW = elem.innerWidth();
var oH = elem.innerHeight();
elem.show().css({"top":(wH-oH)/2+"px","left":(wW-oW)/2+"px"});
$(".mask").fadeIn();
}
$(window).resize(function(){
showModel();
});
}
$(".close").click(function(){
$(".model").hide();
$(".mask").fadeOut();
});
$(document).keydown(function(ev){
if(ev.keyCode == 27){
$(".close").trigger("click");//trigger("事件名") 模拟事件
}
});
});
</script>
</html>
效果图如下：点击注册1，model1注册1内容弹出，点击登录2，model2登录2内容弹出
