用js+iframe形成頁面的一種遮罩效果的具體實現(xiàn)
更新時間:2013年12月31日 15:47:36 作者:
用js形成頁面的一種遮罩效果,選擇想要進行遮罩的窗口,在這里想要遮罩的是一個iframe窗口,具體的實現(xiàn)如下,感興趣的朋友可以參參考下
用這鍛代碼 之前請先下載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");
}
}
復制代碼 代碼如下:
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");
}
}
您可能感興趣的文章:
- iframe子父頁面調用js函數(shù)示例
- 解決extjs在firefox中關閉窗口再打開后iframe中js函數(shù)訪問不到的問題
- js中iframe調用父頁面的方法
- js防止頁面被iframe調用的方法
- js操作iframe父子窗體示例
- iframe子頁面與父頁面在同域或不同域下的js通信
- js判斷iframe內的網(wǎng)頁是否滾動到底部觸發(fā)事件
- js調用iframe實現(xiàn)打印頁面內容的方法
- 通過隱藏iframe實現(xiàn)文件下載的js方法介紹
- js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新
- Javscript調用iframe框架頁面中函數(shù)的方法
相關文章
layui點擊左側導航欄,實現(xiàn)不刷新整個頁面,只刷新局部的方法
今天小編就為大家分享一篇layui點擊左側導航欄,實現(xiàn)不刷新整個頁面,只刷新局部的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

