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