jQuery實現單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)

2019-11-20 20:50:43

字體：大中小

來源：轉載

供稿：網友

我們在天貓進行購物的時候，經常會碰到單擊刪除按鈕或者登陸按鈕后，彈出對話框問你是否刪除或者彈出一個登陸對話框，并且我們也是可以看到我們之前頁面的信息，就是點擊不了，只有對對話框進行操作后才有相應的變化。截圖如下（以天貓為例）

如圖所示，上面就是天貓的效果圖，其實這就是通過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"> 