jQuery 實(shí)現(xiàn)的遮罩層效果

當(dāng)觸發(fā)一個事件，彈出一個iframe，讓這個iframe遮住后面的頁面，這樣后方的頁面功能就會全部失效，也就可以達(dá)到一個遮罩的效果，再通過一個事件取消ifram，恢復(fù)后方頁面的功能。

10年積累的成都做網(wǎng)站、成都網(wǎng)站設(shè)計經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有東陽免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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制作簡單的彈出層，有遮罩。

沒有看到你上傳的圖片，我這里運(yùn)行你的程序沒有出現(xiàn)你說的抖動?，我使用的是FIREFOX

為什么jQuery點(diǎn)擊按鈕后彈出遮罩層一閃而過

動態(tài)加載的按鈕你不能直接.click的，需要給動態(tài)加載的綁定這個事件 $(document).on("click","obj",function(){

//code

}); 其實(shí)以前有一個live函數(shù)可以解決 但是高版本的jquery去掉了這個！

使用jquery 彈出遮罩層 彈出div里的button無法觸發(fā)

如果連事件也觸發(fā)不了的話，說明沒有點(diǎn)擊上對吧

你設(shè)置下 btn的z-index或者有設(shè)置其他的地方z-index修改下，

目的讓btn在最頂層。

我曾經(jīng)碰到類似問題，就是z-index造成的。不知道你的是不是。