在天猫购物时，我们经常会遇到点击删除按钮或登录按钮后弹出对话框，询问是删除还是弹出登录对话框，我们也可以看到我们上一页的信息，就是不能点击，只有操作对话框后才会有相应的变化。截图如下(以天猫为例)

如图所示，上面就是天猫的效果图，其实这就是通过jQuery实现的，并且实现的过程也不是很不复杂，那么现在就让我们来看看实现的过程吧。首先是页面的布局部分：delete.html复制代码代码如下：DOCTYPE html html标题遮罩弹出窗口/title meta http-equiv='关键词'内容='关键词1，关键词2，关键词3 ' meta http-equiv='描述'内容='这是我的页面meta http-equiv=' content-type ' content=' text/html；charset=UTF-8' link rel='样式表type='text/css' href='./css/delete.css '脚本类型=' text/JavaScript ' src=' http :/js/jquery-1。10 .2 .js/脚本脚本类型=' text/JavaScript ' src=' http :/js/delete。js '/script/head body div class=' div show ' input type=' checkbox ' id=' chexkbox 1 ' a href=' # '这是一条可以删除的记录/a输入id='button1 '类型='按钮'值='删除' BTN '/div class=' mask '/div class=' dialog ' div class=' title ' img alt='点击可以关闭src='http:/images/delete。gif ' width=' 30px ' height=' 30px'删除时提示/div class=' content ' img alt=' src=' http :/images/delete。gif ' width=' 60px ' height=' 60px ' span你真的要删除这条记录吗？/span/div class=' bottom '输入类型='button' id='ok '值='确定class='btn '输入类型='button' id='noOk '值='取消class='btn' /div /div /body /html需要做出说明的是，我只添加了一条记录，其实可以模拟多条记录的删除。这里我们有三层差异结构，其中面具和对话使我们通过jquery进行触发的，接下来我们讲下钢性铸铁的布局，先上代码：delete.html复制代码代码如下： @ CHARSET ' UTF-8 '；* { margin : 0pxpadding : 0px }。div show {行高： 32px高度： 32px背景色： # eee宽度： 280像素；左填充： 10px} .对话框{ width : 360 pxborder : 1px # 666固体；绝对位置：显示器：无；z指数： 101；//保证该层在最上面显示} .对话title { background : # fbaf 15 padding : 10pxcolor : # ffffont-weight :粗体；} .对话标题img { float:right}。对话。内容{ background : # fffpadding : 25px高度： 60px} .对话。内容img{左侧浮动：} .对话。内容跨度{左侧浮动：padding: 10px }。对话。底部{文本-对齐：右侧；划水： 10 10 10 0;背景技术# eee}。遮罩{宽度： 100%；高度： 100%;背景技术： # 000;绝对位置：top : 0pxleft : 0pxdisplay :无；z指数： 100；} .btn{ border: #666 1px固体；宽度： 65px} 在半铸钢钢性铸铁(铸造半钢)文件中，我需要着重说明的是z指数的使用，z索引表示的层的堆叠顺序，如果数值越高，表示越在上层显示面具的z指数是100,对话框的z指数是101,数值足够大的原因就是保证绝对在顶层显示，通过数值的调增可以控制差异层的显示。

接下来就是最为主要的射流研究…代码，当然在使用jquery时，我们要导入jquery包：脚本类型=' text/JavaScript ' src=' http :/js/jquery-1。10 .2 .js /脚本delete.js复制代码代码如下： $(function(){ //绑定删除按钮的触发事件$('#button1 ').单击(函数(){ $(').面具')。css(“”不透明度',' 0.3 ')。show()；showDialog()；$('.对话框')。show()；});/* * 根据当前页面于滚动条的位置，设置提示对话框的顶端和left */function showDialog(){ var objw=$(window)；//当前窗口var objc=$(' .对话框');//当前对话框var brsw=objw。宽度()；var brsh=objw。高度()；var SCll=objw。scrolleft()；var SClt=objw。scroll top()；var curw=objc。宽度()；var curh=objc。高度()；//计算对话框居中时的左边距var left=SCll(brsw-curw)/2；var top=SCLt(brsh-curh)/2；//设置对话框居中objc.css({'left':left，' top ' : top })；} //当页面窗口大小改变时触发的事件$(窗口)。resize(function(){ if(！$('.对话框')。是(' :可见'){ return} showDialog()；});//注册关闭图片单击事件$('.标题img ').单击(函数(){ $(').对话框')。hide()；$('.面具')。hide()；});//取消按钮事件$('#noOk ').单击(函数(){ $(').对话框')。hide()；$('.面具')。hide()；});//确定按钮事假$('#ok ').单击(函数(){ $(').对话框')。hide()；$('.面具')。hide()；if($(“输入3360已选中”).长度！=0){ //注意过滤器选择器中间不能存在空格$("输入：已检查")这样是错误的$('.divShow ').移除();//删除某条数据} });});span style='white-space:pre '需要说明的是主要代买就是显示对话框()的用于动态的确定对话框的显示位置。