用js+iframe形成頁(yè)面的一種遮罩效果的具體實(shí)現(xiàn)
更新時(shí)間：2013年12月31日 15:47:36 作者：
用js形成頁(yè)面的一種遮罩效果，選擇想要進(jìn)行遮罩的窗口，在這里想要遮罩的是一個(gè)iframe窗口，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參參考下
用這鍛代碼 之前請(qǐng)先下載jquery庫(kù)
var maskStackCount = 0;
function mask(method){
//這里是你想要進(jìn)行遮罩的窗口，我這里想要遮罩的是一個(gè)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");
}
}
復(fù)制代碼 代碼如下:
var maskStackCount = 0;
function mask(method){
//這里是你想要進(jìn)行遮罩的窗口，我這里想要遮罩的是一個(gè)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子父頁(yè)面調(diào)用js函數(shù)示例
- 解決extjs在firefox中關(guān)閉窗口再打開(kāi)后iframe中js函數(shù)訪問(wèn)不到的問(wèn)題
- js中iframe調(diào)用父頁(yè)面的方法
- js防止頁(yè)面被iframe調(diào)用的方法
- js操作iframe父子窗體示例
- iframe子頁(yè)面與父頁(yè)面在同域或不同域下的js通信
- js判斷iframe內(nèi)的網(wǎng)頁(yè)是否滾動(dòng)到底部觸發(fā)事件
- js調(diào)用iframe實(shí)現(xiàn)打印頁(yè)面內(nèi)容的方法
- 通過(guò)隱藏iframe實(shí)現(xiàn)文件下載的js方法介紹
- js動(dòng)態(tài)創(chuàng)建上傳表單通過(guò)iframe模擬Ajax實(shí)現(xiàn)無(wú)刷新
- Javscript調(diào)用iframe框架頁(yè)面中函數(shù)的方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能(附源碼)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
ZeroClipboard插件實(shí)現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上，這樣其實(shí)點(diǎn)擊的不是按鈕而是Flash ，這樣將需要的內(nèi)容傳入Flash，再通過(guò)Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板2014-08-08
javascript中alert()與console.log()的區(qū)別
我們?cè)谧鰆s調(diào)試的時(shí)候使用 alert 可以顯示信息，調(diào)試程序，alert 彈出窗口會(huì)中斷程序， 如果要在循環(huán)中顯示信息，手點(diǎn)擊關(guān)閉窗口都累死。而且 alert 顯示對(duì)象永遠(yuǎn)顯示為[object ]。 自己寫(xiě)的 log 雖然可以顯示一些 object 信息，但很多功能支持都沒(méi)有 console 好2015-08-08
js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果
這篇文章主要介紹了js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果,通過(guò)由上往下滾動(dòng)來(lái)實(shí)現(xiàn)不斷顯示微博的，而且每一天新微博都是通過(guò)淡入效果顯示的,需要的朋友可以參考下2015-12-12
瀏覽器兼容console對(duì)象的簡(jiǎn)要解決方案分享
不同瀏覽器或者版本之間對(duì)于console對(duì)象的支持不盡相同，而console方法在開(kāi)發(fā)調(diào)試過(guò)程中都是不錯(cuò)的工具。難道要在上線前把所有console.xxxx去掉以保證某些瀏覽器不報(bào)錯(cuò)么。其實(shí)可以變通解決2013-10-10
javascript設(shè)置和獲取cookie的方法實(shí)例詳解
這篇文章主要介紹了javascript設(shè)置和獲取cookie的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析總結(jié)了JavaScript操作cookie簡(jiǎn)單實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與讀取的相關(guān)技巧,需要的朋友可以參考下2016-01-01
echarts自定義tooltip中的內(nèi)容代碼示例
在ECharts中,通過(guò)formatter函數(shù)自定義圖例樣式,可以實(shí)現(xiàn)更靈活的圖表展示,滿足特定的視覺(jué)需求,這篇文章主要介紹了echarts自定義tooltip中內(nèi)容的相關(guān)資料,需要的朋友可以參考下2024-10-10
JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法
這篇文章主要為大家介紹了JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
基于chosen插件實(shí)現(xiàn)人員選擇樹(shù)搜索自動(dòng)篩選功能
這篇文章主要介紹了基于chosen插件實(shí)現(xiàn)人員選擇樹(shù)搜索自動(dòng)篩選功能的相關(guān)資料,需要的朋友可以參考下2016-09-09
本文主要介紹了折疊菜單及選擇器的運(yùn)用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02