jqueryロックポップアップレイヤーの実装 code

jqueryロックポップアップレイヤーの実装 code_jquery

WBOY

リリース： 2016-05-16 18:34:16

オリジナル

1095 人が閲覧しました

jquery ベースのポップアップ層のロック
これも、js フレームワーク jquery のメソッドをいくつか引用しながら、さりげなくまとめられています。
他のコントロールをカバーする div の方法は次のとおりです。フラッシュをカバーする必要がある場合は、フラッシュコントロールの WMode 変数値を透明に設定してください。
使用方法:

コードをコピーコードは次のとおりです:

//構成モジュール

var moduleEvent = [{"idName" :"close" , "eventName" :"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}]; qihoo_effect_maskDiv.showMaskDiv("your div id " , moduleEvent); // div の表示を none に設定してください。
********************************************** ***** ********
effect/maskDiv.js

コードをコピーコードは次のとおりです以下のように:

var qihoo_effect_maskDiv = { 
_module : {}, 
_css : {}, 
_instance : "" , 
_event : {"CLOSE_WINDOW" : function() { ウィンドウ。近い（）; } , "CLOSE_DIV" : function(){qihoo_effect_maskDiv.closeDiv();} , "RESIZE_WINDOW" : function(){qihoo_effect_maskDiv.resizeWindow();} }, 
_isIe : eval("false;/*@cc_on@ if(@x5fwin32)isMSIE=true@end@*/") , 
init : function (){ 
if (this._instance){ 
return this._instance; 
} 
this.appendBackGroundDiv(); 
this._instance = this; 
this._instance を返します; 
}, 
appendBackGroundDiv : function (){ 
this._module.backGroundDiv = $("
"); 
this._module.backGroundDiv.appendTo("body"); 
this._css.mask = { "background-color":"#000" , "position":"absolute", "-moz-opacity": "0.75" , "filter":"alpha(opacity=75) )","z-index":5 、"width" : document.body.clientWidth 100 、 "height" : document.body.clientHeight 300 、 "top" : "0px" 、 "left":"0px" 、 "表示" : "なし"}; 
this._module.backGroundDiv.css(this._css.mask); 
this._module.coverIframe = $(""); 
this._css.normalIframe = {'position':'absolute','left':'-1000px','top':'-1000px','z-index':7}; 
this._module.coverIframe.css(this._css.normalIframe); 
this._module.coverIframe.appendTo("body"); 
}, 
showMaskDiv : function (showDivId , moduleEvent, Position ){ 
instance = this; 
if (this._isIe){ 
if(document.readyState != "complete"){ 
setTimeout(function(){instance.showMaskDiv(showDivId , moduleEvent ,position);} , 100); 
 false を返します。 
} 
} 
if ("" == this._instance){ 
this.init(); 
} 
this._module.showDiv = $("#" showDivId); 
if (typeofposition == 'unknown'){ 
this._css.coverIframe = {'position':'absolute','top':parseInt(screen.height/4 document.documentElement.scrollTop) " px",'left':parseInt(screen.width/4 document.documentElement.scrollLeft) "px",'zIndex':7}; 
this._css.coverd = {"zIndex" : 10 , "position" : "absolute" ,"width":"400px" , "height":"240px" ,"top": parseInt(screen.height/ 4 document.documentElement.scrollTop) "px", "left":parseInt(screen.width/4 document.documentElement.scrollLeft) "px"}; 
} 
else{ 
this._css.coverIframe = {'position':'absolute',"height" :position.height, "width":position.width , "top":position.top , "left":position.left,'zIndex':7}; 
this._css.coverd = {"zIndex" : 10 、"position" : "absolute" 、"height" :position.height、"width":position.width 、"top":position.top 、"left ":位置.左}; 
} 
for (var i in moduleEvent){ 
if (typeof moduleEvent[i].idName != "未定義") { 
$("#" moduleEvent[i].idName). bind(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]); 
} 
if (typeof moduleEvent[i].idObj != "未定義") { 
$(moduleEvent[i].idObj).bind(moduleEvent[i].eventName , this._event[moduleEvent] [i].doMethod]); 
} 
} 
this._module.backGroundDiv.show(); 
showDivFront = this._module.showDiv; 
cssParam = this._css; 
coveredIframe = this._module.coverIframe; 
this._module.backGroundDiv.animate({opacity:0.75},"normal" , function(){coveredIframe.css(cssParam.coverIframe);showDivFront.show();}); 
this._module.showDiv.css(this._css.coverd); 
}, 
resizeWindow : function (){ 
this._css.mask = { "background-color":"#000" , "position":"absolute", "-moz-opacity": "0.75" 、 "opacity":"0.75" 、 "filter":"alpha(opacity=75)"、"zIndex":5 、 "width" : document.body.clientWidth 100、 "height" : document.body。 clientHeight 300 , "top" : "0px" , "left":"0px"}; 
this._module.backGroundDiv.css(this._css.mask); 
}, 
closeDiv : function (){ 
this._module.coverIframe.css(this._css.normalIframe); 
this._module.showDiv.hide(); 
hidebBackGroundDiv = this._module.backGroundDiv; 
this._module.backGroundDiv.animate({opacity:0},"normal", function(){hidebBackGroundDiv.hide();}); 
} 
}; 

コメントを見て、いくつかの使用法を追加しました。

これは、jquery フレームワークを導入せずに同じ効果を達成するプログラムです。

紹介ファイル

コードは次のとおりです。

var w = Math.max(document. documentElement.scrollWidth , document.documentElement.clientWidth) "px"; //幅を取得します
var h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) "px"; 
// 透明な背景レイヤーを定義します 
var gb = $("").attr("id","gb") 
.css({top:"0" ,left:"0 ",zIndex:"2",position:"absolute",filter:"alpha(opacity=0)",background:"#fff"}) 
.css("width",w) .css("height ",h) 

 
実際、最も重要な説明は、背景レイヤーの CSS 定義を説明することです。まず、topとleftを有効にするには、position:absoluteを設定する必要があります。フィルター: "alpha(opacity=0) は透明度を設定します。値は 0 ～ 100 です。0 は完全に透明を意味し、100 は不透明を意味します。background は背景レイヤーの色を設定します。zIndex の値は下端よりも大きいことだけが必要です。 (zIndex の値が大きいほど、値は高くなります)。基本的にはこれで完了です。                