JQuery模擬boostrap模態框效果
阿新 • • 發佈：2018-12-28
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">
效果圖如下：點選登入後模態框出現，模態框隨著視窗移動而移動（不是固定在頁面）
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內容彈出
