jQuery實作點選按鈕遮罩彈出對話框(仿天貓的刪除對話框)

jQuery實作點選按鈕遮罩彈出對話框(仿天貓的刪除對話框)_jquery

WBOY

發布： 2016-05-16 16:52:55

原創

1199 人瀏覽過

我們在天貓進行購物的時候，經常會碰到單擊刪除按鈕或登陸按鈕後，彈出對話框問你是否刪除或彈出一個登陸對話框，並且我們也是可以看到我們之前頁面的信息，就是點擊不了，只有對話方塊進行操作後才有相對應的變化。截圖如下（以天貓為例）
jQuery實作點選按鈕遮罩彈出對話框(仿天貓的刪除對話框)_jquery
如圖所示，上面就是天貓的效果圖，其實這就是透過jQuery實現的，並且實現的過程也不是很不復雜，那麼現在就讓我們來看看實現的過程。

首先是頁面的版面部分：delete.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; -left: 10px; 
} 



.dialog{ 
width: 360px; 
border: 1px #666 solid;  >display: none; 
z-index: 101;//保證該層在最上面顯示
} 

.dialog .title{ 
background:#fbaf15; 
padding : 10px; 
color: #fff; 
font-weight: bold; 

} 

.dialog .title img{ 
float:right 
.dialog .title img{ 
float:right 
; 

.dialog .content{ 

background: #fff; 
padding: 25px; 
height: 60px; 
} 

float: left; 
} 
.dialog .content span{ 
float: left; 
padding: 10px; 

} 
padding: 10px; 

} 


.dialog .bottom{ 

text-align: right; 
padding: 10 10 10 0; 
background: #eee; 
} 

background: #eee; 
} 

.mas{ 

width: 100%; 
height: 100%; 
background: #000; 
position: absolute; 
top: 0px; 
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包：

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();//刪除某一資料
} 

}); 


}); 

 
需要說明的是主要代買就是showDialog（）的用於動態的決定對話框的顯示位置。