用js+iframe形成页面的一种遮罩效果的具体实现

192 阅读 0 评论 127 点赞

我是靠谱客的博主受伤眼睛，最近开发中收集的这篇文章主要介绍用js+iframe形成页面的一种遮罩效果的具体实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用这锻代码之前请先下载jquery库

复制代码代码如下:

 
var maskStackCount = 0; 

function mask(method){ 

//这里是你想要进行遮罩的窗口，我这里想要遮罩的是一个iframe窗口，也可以用var winObj=$(window) 

var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']"); 
if(typeof method == "undefined"){ 
method="open"; 
} 
if (method == "open") { 
if (maskStackCount <= 0) { 
var mask = $("<div id='window-mask' class='window-mask' style='display:none'></div>").appendTo("body"); 
mask.css({ 
width: winObj.width() + "px", 
height: winObj.height() + "px", 
filter: "alpha(opacity=60)" 
}).show(); 
winObj.on("resize.mask", function(){ 
mask.css({ 
width: winObj.width() + "px", 
height: winObj.height() + "px" 
}); 
}); 
} 
maskStackCount++; 
} 
else if(method == "close"){ 
maskStackCount--; 
$("#window-mask").remove(); 
winObj.off("resize.mask"); 
} 
} 