這篇文章主要介紹jQuery怎么實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

縉云網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),縉云網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為縉云千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的縉云做網(wǎng)站的公司定做！

主要用到了：/jquery-1.10.2.min.js
代碼如下：

 
 
 
 
 
 
/* CSS Document */ 
 
@CHARSET "UTF-8"; 
*{ 
margin: 0px; 
padding: 0px; 
 
} 
.divShow{ 
/*設(shè)置字體高度 
div的高度 
背景色 
div寬度 
左內(nèi)距為10px 
*/ 
line-height: 50px; 
height: 60px; 
background-color: #dddddd; 
width: 300px; 
padding-left: 15px; 
} 
 
 
 
.dialog{ 
/* 
設(shè)置寬度 
設(shè)置邊框?qū)挾?顏色+引 
display：none表示影藏 
z-index：//保證該層在最上面顯示 
*/ 
width: 360px; 
border: 10px #fff solid; 
position: absolute; 
display: none; 
z-index: 101; 
} 
 
.dialog .title{ 
/* 
設(shè)置背景色 
設(shè)置內(nèi)邊距 
設(shè)置字體顏色 
設(shè)置字體加粗 
*/ 
background:#fbaf15; 
padding: 10px; 
color: #fff; 
font-weight: bold; 
 
} 
 
.dialog .title img{ 
/* 
設(shè)置元素向右浮動(dòng) 
*/ 
float:right; 
} 
 
.dialog .content{ 
/* 
設(shè)置背景色 
設(shè)置內(nèi)邊距 
設(shè)置高度 
*/ 
background: #fff; 
padding: 25px; 
height: 60px; 
} 
 
.dialog .content img{ 
float: left; 
} 
.dialog .content span{ 
float: left; 
padding: 10px; 
 
} 
 
 
.dialog .bottom{ 
/* 
設(shè)置文本向右對(duì)齊 
設(shè)置內(nèi)邊局 上右下左 
*/ 
text-align: right; 
padding: 10 10 10 0; 
background: #eee; 
} 
 
.mask{ 
/* 
里面有個(gè)display：no； 
開始的時(shí)候看不到這個(gè)div的效果它主要作用是封閉整個(gè)頁(yè)面 
*/ 
width: 100%; 
height: 100%; 
background: #000; 
position: absolute; 
top: 0px; 
left: 0px; 
display: none; 
z-index: 100; 
 
} 
.btn{ 
 
border: #666 1px solid; 
width: 65px; 
 
} 
 
 
 
 
// JavaScript Document$(function(){ 
 
//綁定刪除按鈕的觸發(fā)事件 
 
$(document).ready(function(){ 
//按下按鈕觸發(fā)操作 
$("#button1").click(function(){ 
//設(shè)置 div 元素的不透明級(jí)別：透明度取值(取值范圍[0.0,1.0]) 
$(".mask").css("opacity","0.3").show(); 
//制作對(duì)話框 
showDialog(); 
//展現(xiàn)css的特效 
$(".dialog").show(); 
 
}); 
 
 
//當(dāng)頁(yè)面窗口大小改變時(shí)觸發(fā)的事件 
$(window).resize(function(){ 
 
if(!$(".dialog").is(":visible")){ 
return; 
} 
showDialog(); 
}); 
 
//注冊(cè)關(guān)閉圖片單擊事件 
$(".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")這樣是錯(cuò)誤的 
$(".divShow").remove();//刪除某條數(shù)據(jù) 
} 
 
}); 
}); 
/* 
* 根據(jù)當(dāng)前頁(yè)面于滾動(dòng)條的位置，設(shè)置提示對(duì)話框的TOP和left 
*/ 
function showDialog(){ 
var objw=$(window);//獲取當(dāng)前窗口 
var objc=$(".dialog");//獲取當(dāng)前對(duì)話框 
var brsw=objw.width(); //獲取頁(yè)面寬度 
var brsh=objw.height(); //獲取頁(yè)面高度 
var sclL=objw.scrollLeft(); //獲取頁(yè)面左滑動(dòng)條信息 
var sclT=objw.scrollTop(); 
var curw=objc.width(); //獲取對(duì)話框?qū)挾?nbsp;
var curh=objc.height(); //獲取對(duì)話框高度 
 
var left=sclL+(brsw -curw)/2; //計(jì)算對(duì)話框居中時(shí)的左邊距 
var top=sclT+(brsh-curh)/2; //計(jì)算對(duì)話框居中時(shí)的上邊距 
 
 
objc.css({"left":left,"top":top}); //設(shè)置對(duì)話框居中 
 
} 
 
 
 
 
 
 這是一條可以刪除的記錄