jQuery 实现的遮罩层效果

当触发一个事件，弹出一个iframe，让这个iframe遮住后面的页面，这样后方的页面功能就会全部失效，也就可以达到一个遮罩的效果，再通过一个事件取消ifram，恢复后方页面的功能。

10年积累的成都做网站、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有东阳免费网站建设让你可以放心的选择与我们合作。

a.html

!DOCTYPE 

HTML PUBLIC "-//W3C//DTD HTML 4.01 

Transitional//EN"

html

head

titlemask/title

script type="text/javascript" 

src=""/script

script 

type="text/javascript"

$(document).ready(function 

(){

$('#mask').bind({

click:function 

(){

var c = "iframe frameborder='0' 

class='mask'style='width:"+$(window).width()+";height:"+($(window).height())+"' 

src='b.html'allowtransparency='true'/iframe";

$('body').append(c);

}

});

});

/script

style 

type="text/css"

.mask{

display:block;

position:absolute;

z-index:100;

top: 

0px;

left:0px;

filter:alpha(opacity=50);

}

body{

background-color:yellow;

}

/style

/head

body

center

ssssss

input type="button" 

value="mask" id="mask"

/center

/body

/html

b.html

!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 

Transitional//EN"

html

head

titlemask/title

script type="text/javascript" 

src=""/script

script 

type="text/javascript"

$(document).ready(function 

(){

$('#remove').bind('click',function 

(){

$(window.parent.document).find('iframe').remove() 

;

});

});

/script

style 

type="text/css"

body{

background-color: 

#6C7B8B;

}

/style

/head

body

center

brbrbrbrbrbrbrbrbr

input type="button"id="remove" 

value="remove"

center

/body

/html

jquery制作简单的弹出层，有遮罩。

没有看到你上传的图片，我这里运行你的程序没有出现你说的抖动 ，我使用的是FIREFOX

为什么jQuery点击按钮后弹出遮罩层一闪而过

动态加载的按钮你不能直接.click的，需要给动态加载的绑定这个事件 $(document).on("click","obj",function(){

//code

}); 其实以前有一个live函数可以解决 但是高版本的jquery去掉了这个！

使用jquery 弹出遮罩层 弹出div里的button无法触发

如果连事件也触发不了的话，说明没有点击上对吧

你设置下 btn的z-index或者有设置其他的地方z-index修改下，

目的让btn在最顶层。

我曾经碰到类似问题，就是z-index造成的。不知道你的是不是。

本文名称：jquery弹出遮罩,js弹出Div出现遮罩层
当前URL：http://scyanting.com/article/dssisih.html