jQuery实现单击按钮遮罩弹出对话框效果（1）

本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码，供大家参考，具体内容如下

看到网上一位大神的代码后，大概进行了注释，调试了一下页面以后感觉不错，留作以后使用。
主要用到了：/jquery-1.10.2.min.js
代码如下：

 
 
 
 
 
 
 
 
@CHARSET "UTF-8"; 
*{ 
margin: 0px; 
padding: 0px; 
 
} 
.divShow{ 
 
line-height: 50px; 
height: 60px; 
background-color: #dddddd; 
width: 300px; 
padding-left: 15px; 
} 
 
 
 
.dialog{ 
 
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{ 
 
width: 100%; 
height: 100%; 
background: #000; 
position: absolute; 
top: 0px; 
left: 0px; 
display: none; 
z-index: 100; 
 
} 
.btn{ 
 
border: #666 1px solid; 
width: 65px; 
 
} 
 
 
 
 
 
 
 
 这是一条可以删除的记录 
 
 
 
 
 
 
 
 
 
删除时提示 
 
 
 
 
你真的要删除这条记录吗？ 
 
 
 
 
 
 
 
 
 
 
 

展示一张在谷歌上的效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。