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（）的用於動態的決定對話框的顯示位置。