jQuery怎么实现单击按钮遮罩弹出对话框效果

这篇文章主要介绍jQuery怎么实现单击按钮遮罩弹出对话框效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

缙云网站建设公司成都创新互联,缙云网站设计制作，有大型网站制作公司丰富经验。已为缙云千余家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的缙云做网站的公司定做！

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

 
 
 
 
 
 
/* CSS Document */ 
 
@CHARSET "UTF-8"; 
*{ 
margin: 0px; 
padding: 0px; 
 
} 
.divShow{ 
/*设置字体高度 
div的高度 
背景色 
div宽度 
左内距为10px 
*/ 
line-height: 50px; 
height: 60px; 
background-color: #dddddd; 
width: 300px; 
padding-left: 15px; 
} 
 
 
 
.dialog{ 
/* 
设置宽度 
设置边框宽度+颜色+引 
display：none表示影藏 
z-index：//保证该层在最上面显示 
*/ 
width: 360px; 
border: 10px #fff 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{ 
/* 
里面有个display：no； 
开始的时候看不到这个div的效果它主要作用是封闭整个页面 
*/ 
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(){ 
 
//绑定删除按钮的触发事件 
 
$(document).ready(function(){ 
//按下按钮触发操作 
$("#button1").click(function(){ 
//设置 div 元素的不透明级别：透明度取值(取值范围[0.0,1.0]) 
$(".mask").css("opacity","0.3").show(); 
//制作对话框 
showDialog(); 
//展现css的特效 
$(".dialog").show(); 
 
}); 
 
 
//当页面窗口大小改变时触发的事件 
$(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();//删除某条数据 
} 
 
}); 
}); 
/* 
* 根据当前页面于滚动条的位置，设置提示对话框的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}); //设置对话框居中 
 
} 
 
 
 
 
 
 这是一条可以删除的记录