DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)
jQuery實現單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)
編輯：JQuery特效代碼
我們在天貓進行購物的時候，經常會碰到單擊刪除按鈕或者登陸按鈕後，彈出對話框問你是否刪除或者彈出一個登陸對話框，並且我們也是可以看到我們之前頁面的信息，就是點擊不了，只有對對話框進行操作後才有相應的變化。截圖如下（以天貓為例）
如圖所示，上面就是天貓的效果圖，其實這就是通過jQuery實現的，並且實現的過程也不是很不復雜，那麼現在就讓我們來看看實現的過程吧。
首先是頁面的布局部分：delete.html
. 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>遮罩彈出窗口</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/delete.css">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/delete.js"></script>
</head>
<body>
<div class="divShow">
<input type="checkbox" id="chexkBox1"> <a href="#">這是一條可以刪除的記錄</a>
<input id="button1" type="button" value="刪除" class="btn">
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img alt="點擊可以關閉" src="../images/delete.gif" width="30px" height="30px;">
刪除時提示
</div>
<div class="content">
<img alt="" src="../images/delete.gif" width="60px" height="60px">
<span>你真的要刪除這條記錄嗎？</span>
</div>
<div class="bottom">
<input type="button" id="ok" value="確定" class="btn">
<input type="button" id="noOk" value="取消" class="btn">
</div>
</div>
</body>
</html>
需要做出說明的是，我只添加了一條記錄，其實可以模擬多條記錄的刪除。這裡我們有三層div結構，其中mask和dialog使我們通過jquery進行觸發的，接下來我們講下css的布局，先上代碼：delete.html
. 代碼如下:
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
}
.divShow{
line-height: 32px;
height: 32px;
background-color: #eee;
width: 280px;
padding-left: 10px;
}
.dialog{
width: 360px;
border: 1px #666 solid;
position: absolute;
display: none;
z-index: 101;//保證該層在最上面顯示
}
.dialog .title{
background:#fbaf15;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dialog .title img{
float:right;
}
.dialog .content{
background: #fff;
padding: 25px;
height: 60px;
}
.dialog .content img{
float: left;
}
.dialog .content span{
float: left;
padding: 10px;
}
.dialog .bottom{
text-align: right;
padding: 10 10 10 0;
background: #eee;
}
.mask{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 100;
}
.btn{
border: #666 1px solid;
width: 65px;
}
在CSS文件中，我需要著重說明的是z-index的使用，z-index表示的層的堆疊順序，如果數值越高，表示越在上層顯示，mask的z-index是100，dialog的z-index是101，數值足夠大的原因就是保證絕對在頂層顯示，通過數值的調增可以控制div層的顯示。
接下來就是最為主要的js代碼，當然在使用jquery時，我們要導入jquery包：<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
delete.js
. 代碼如下:
$(function(){
//綁定刪除按鈕的觸發事件
$("#button1").click(function(){
$(".mask").css("opacity","0.3").show();
showDialog();
$(".dialog").show();
});
/*
* 根據當前頁面於滾動條的位置，設置提示對話框的TOP和left
*/
function showDialog(){
var objw=$(window);//當前窗口
var objc=$(".dialog");//當前對話框
var brsw=objw.width();
var brsh=objw.height();
var sclL=objw.scrollLeft();
var sclT=objw.scrollTop();
var curw=objc.width();
var curh=objc.height();
//計算對話框居中時的左邊距
var left=sclL+(brsw -curw)/2;
var top=sclT+(brsh-curh)/2;
//設置對話框居中
objc.css({"left":left,"top":top});
}
//當頁面窗口大小改變時觸發的事件
$(window).resize(function(){
if(!$(".dialog").is(":visible")){
return;
}
showDialog();
});
//注冊關閉圖片單擊事件
$(".title img").click(function(){
$(".dialog").hide();
$(".mask").hide();
});
//取消按鈕事件
$("#noOk").click(function(){
$(".dialog").hide();
$(".mask").hide();
});
//確定按鈕事假
$("#ok").click(function(){
$(".dialog").hide();
$(".mask").hide();
if($("input:checked").length !=0){
//注意過濾器選擇器中間不能存在空格$("input :checked")這樣是錯誤的
$(".divShow").remove();//刪除某條數據
}
});
});<span style="white-space:pre">
需要說明的是主要代買就是showDialog（）的用於動態的確定對話框的顯示位置。
如圖所示，上面就是天貓的效果圖，其實這就是通過jQuery實現的，並且實現的過程也不是很不復雜，那麼現在就讓我們來看看實現的過程吧。
首先是頁面的布局部分：delete.html
. 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>遮罩彈出窗口</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/delete.css">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/delete.js"></script>
</head>
<body>
<div class="divShow">
<input type="checkbox" id="chexkBox1"> <a href="#">這是一條可以刪除的記錄</a>
<input id="button1" type="button" value="刪除" class="btn">
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img alt="點擊可以關閉" src="../images/delete.gif" width="30px" height="30px;">
刪除時提示
</div>
<div class="content">
<img alt="" src="../images/delete.gif" width="60px" height="60px">
<span>你真的要刪除這條記錄嗎？</span>
</div>
<div class="bottom">
<input type="button" id="ok" value="確定" class="btn">
<input type="button" id="noOk" value="取消" class="btn">
</div>
</div>
</body>
</html>
需要做出說明的是，我只添加了一條記錄，其實可以模擬多條記錄的刪除。這裡我們有三層div結構，其中mask和dialog使我們通過jquery進行觸發的，接下來我們講下css的布局，先上代碼：delete.html
. 代碼如下:
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
}
.divShow{
line-height: 32px;
height: 32px;
background-color: #eee;
width: 280px;
padding-left: 10px;
}
.dialog{
width: 360px;
border: 1px #666 solid;
position: absolute;
display: none;
z-index: 101;//保證該層在最上面顯示
}
.dialog .title{
background:#fbaf15;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dialog .title img{
float:right;
}
.dialog .content{
background: #fff;
padding: 25px;
height: 60px;
}
.dialog .content img{
float: left;
}
.dialog .content span{
float: left;
padding: 10px;
}
.dialog .bottom{
text-align: right;
padding: 10 10 10 0;
background: #eee;
}
.mask{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 100;
}
.btn{
border: #666 1px solid;
width: 65px;
}
在CSS文件中，我需要著重說明的是z-index的使用，z-index表示的層的堆疊順序，如果數值越高，表示越在上層顯示，mask的z-index是100，dialog的z-index是101，數值足夠大的原因就是保證絕對在頂層顯示，通過數值的調增可以控制div層的顯示。
接下來就是最為主要的js代碼，當然在使用jquery時，我們要導入jquery包：<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
delete.js
. 代碼如下:
$(function(){
//綁定刪除按鈕的觸發事件
$("#button1").click(function(){
$(".mask").css("opacity","0.3").show();
showDialog();
$(".dialog").show();
});
/*
* 根據當前頁面於滾動條的位置，設置提示對話框的TOP和left
*/
function showDialog(){
var objw=$(window);//當前窗口
var objc=$(".dialog");//當前對話框
var brsw=objw.width();
var brsh=objw.height();
var sclL=objw.scrollLeft();
var sclT=objw.scrollTop();
var curw=objc.width();
var curh=objc.height();
//計算對話框居中時的左邊距
var left=sclL+(brsw -curw)/2;
var top=sclT+(brsh-curh)/2;
//設置對話框居中
objc.css({"left":left,"top":top});
}
//當頁面窗口大小改變時觸發的事件
$(window).resize(function(){
if(!$(".dialog").is(":visible")){
return;
}
showDialog();
});
//注冊關閉圖片單擊事件
$(".title img").click(function(){
$(".dialog").hide();
$(".mask").hide();
});
//取消按鈕事件
$("#noOk").click(function(){
$(".dialog").hide();
$(".mask").hide();
});
//確定按鈕事假
$("#ok").click(function(){
$(".dialog").hide();
$(".mask").hide();
if($("input:checked").length !=0){
//注意過濾器選擇器中間不能存在空格$("input :checked")這樣是錯誤的
$(".divShow").remove();//刪除某條數據
}
});
});<span style="white-space:pre">
需要說明的是主要代買就是showDialog（）的用於動態的確定對話框的顯示位置。
小編推薦
熱門推薦