jquery 잠금 팝업 레이어 구현 code_jquery
- WBOY원래의
- 2016-05-16 18:34:161096검색
jquery 기반 잠금 팝업 레이어
이것도 js 프레임워크 jquery의 몇 가지 메서드를 인용하여 무심코 요약한 것입니다.
div가 다른 컨트롤을 가리는 방법은 다음과 같습니다. 플래시 컨트롤의 WMode 변수 값을 Transparent로 설정하세요.
사용 방법:
<script> <br><br> </div>//구성 모듈<br>var moduleEvent = [{"idName" :"close" , "eventName" :"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}] <br> qihoo_효과_maskDiv.showMaskDiv("your div id " , moduleEvent); //div 표시를 없음으로 설정하세요. <br>************************************************************************ ***** ******** <br> effect/maskDiv.js <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="71710" class="copybut" id="copybut71710" onclick="doCopy('code71710')">코드 복사<u></u></a> 코드는 다음과 같습니다:</span><div class="codebody" id="code71710"> <br>var qihoo_효과_maskDiv = { <br>_module : {}, <br>_css : {}, <br>_instance : "" , <br>_event : {"CLOSE_WINDOW" : function() { window. 닫다(); } , "CLOSE_DIV" : function(){qihoo_효과_maskDiv.closeDiv();} , "RESIZE_WINDOW" : function(){qihoo_효과_maskDiv.resizeWindow();} }, <br>_isIe : eval("false;/*@cc_on@ if(@x5fwin32)isMSIE=true@end@*/") , <br>init : function (){ <br>if (this._instance){ <br>return this._instance; <br>} <br>this.appendBackGroundDiv(); <br>this._instance = this; <br>return this._instance; <br>}, <br>appendBackGroundDiv : 함수(){ <br>this._module.backGroundDiv = $("<div id='qihoo_효과_maskDiv_module_backGroundDiv'></div>"); <br>this._module.backGroundDiv.appendTo("body"); <br>this._css.mask = { "배경색":"#000" , "위치":"절대", "-moz-opacity": "0.75" , "filter":"alpha(opacity=75 )","z-index":5 , "너비" : document.body.clientWidth 100 , "높이" : document.body.clientHeight 300 , "상단" : "0px" , "왼쪽":"0px" , " 디스플레이": "없음"}; <br>this._module.backGroundDiv.css(this._css.mask); <br>this._module.coverIframe = $("<iframe src='javascript:false' id='qihoo_효과_maskDiv_module_iframe'frameborder='1'></iframe>"); <br>this._css.normalIframe = {'위치':'절대','왼쪽':'-1000px','top':'-1000px','z-index':7}; <br>this._module.coverIframe.css(this._css.normalIframe); <br>this._module.coverIframe.appendTo("body"); <br>}, <br>showMaskDiv : 함수(showDivId, moduleEvent, position){ <br>instance = this; <br>if (this._isIe){ <br>if(document.readyState != "complete"){ <br>setTimeout(function(){instance.showMaskDiv(showDivId , moduleEvent , position);} , 100); <br>거짓을 반환합니다. <br>} <br>} <br>if ("" == this._instance){ <br>this.init(); <br>} <br>this._module.showDiv = $("#" showDivId); <br>if (위치 유형 == '정의되지 않음'){ <br>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}; <br>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"}; <br>} <br>else{ <br>this._css.coverIframe = {'position':'absolute',"height" : position.height, "width":position.width , "top": position.top , "왼쪽":position.left,'zIndex':7}; <br>this._css.coverd = {"zIndex" : 10 , "position" : "absolute" , "height" : position.height, "width":position.width , "top": position.top , "left" ":위치.왼쪽}; <br>} <br>for (var i in moduleEvent){ <br>if (typeof moduleEvent[i].idName != "undefine") { <br>$("#" moduleEvent[i].idName). 바인딩(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]); <br>} <br>if (typeof moduleEvent[i].idObj != "정의되지 않음") { <br>$(moduleEvent[i].idObj).bind(moduleEvent[i].eventName , this._event[moduleEvent [i].do메소드]); <br>} <br>} <br>this._module.backGroundDiv.show(); <br>showDivFront = this._module.showDiv; <br>cssParam = this._css; <br>coveredIframe = this._module.coverIframe; <br>this._module.backGroundDiv.animate({opacity:0.75},"normal" , function(){coveredIframe.css(cssParam.coverIframe);showDivFront.show();}); <br>this._module.showDiv.css(this._css.coverd); <br>}, <br>resizeWindow: 함수(){ <br>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"}; <br>this._module.backGroundDiv.css(this._css.mask); <br>}, <br>closeDiv : 함수(){ <br>this._module.coverIframe.css(this._css.normalIframe); <br>this._module.showDiv.hide(); <br>hidebBackGroundDiv = this._module.backGroundDiv; <br>this._module.backGroundDiv.animate({opacity:0},"normal", function(){hidebBackGroundDiv.hide();}); <br>} <br>}; <br> </div> <br>댓글을 보고 몇 가지 사용법을 추가했습니다. <br><br>다음은 jquery 프레임워크를 도입하지 않고도 동일한 효과를 얻는 프로그램입니다. <br><br>소개 파일<br><script src="/js/jquery.js"></script>
이것도 js 프레임워크 jquery의 몇 가지 메서드를 인용하여 무심코 요약한 것입니다.
div가 다른 컨트롤을 가리는 방법은 다음과 같습니다. 플래시 컨트롤의 WMode 변수 값을 Transparent로 설정하세요.
사용 방법:
코드 복사 코드는 다음과 같습니다.
<script> <br><br> </div>//구성 모듈<br>var moduleEvent = [{"idName" :"close" , "eventName" :"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}] <br> qihoo_효과_maskDiv.showMaskDiv("your div id " , moduleEvent); //div 표시를 없음으로 설정하세요. <br>************************************************************************ ***** ******** <br> effect/maskDiv.js <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="71710" class="copybut" id="copybut71710" onclick="doCopy('code71710')">코드 복사<u></u></a> 코드는 다음과 같습니다:</span><div class="codebody" id="code71710"> <br>var qihoo_효과_maskDiv = { <br>_module : {}, <br>_css : {}, <br>_instance : "" , <br>_event : {"CLOSE_WINDOW" : function() { window. 닫다(); } , "CLOSE_DIV" : function(){qihoo_효과_maskDiv.closeDiv();} , "RESIZE_WINDOW" : function(){qihoo_효과_maskDiv.resizeWindow();} }, <br>_isIe : eval("false;/*@cc_on@ if(@x5fwin32)isMSIE=true@end@*/") , <br>init : function (){ <br>if (this._instance){ <br>return this._instance; <br>} <br>this.appendBackGroundDiv(); <br>this._instance = this; <br>return this._instance; <br>}, <br>appendBackGroundDiv : 함수(){ <br>this._module.backGroundDiv = $("<div id='qihoo_효과_maskDiv_module_backGroundDiv'></div>"); <br>this._module.backGroundDiv.appendTo("body"); <br>this._css.mask = { "배경색":"#000" , "위치":"절대", "-moz-opacity": "0.75" , "filter":"alpha(opacity=75 )","z-index":5 , "너비" : document.body.clientWidth 100 , "높이" : document.body.clientHeight 300 , "상단" : "0px" , "왼쪽":"0px" , " 디스플레이": "없음"}; <br>this._module.backGroundDiv.css(this._css.mask); <br>this._module.coverIframe = $("<iframe src='javascript:false' id='qihoo_효과_maskDiv_module_iframe'frameborder='1'></iframe>"); <br>this._css.normalIframe = {'위치':'절대','왼쪽':'-1000px','top':'-1000px','z-index':7}; <br>this._module.coverIframe.css(this._css.normalIframe); <br>this._module.coverIframe.appendTo("body"); <br>}, <br>showMaskDiv : 함수(showDivId, moduleEvent, position){ <br>instance = this; <br>if (this._isIe){ <br>if(document.readyState != "complete"){ <br>setTimeout(function(){instance.showMaskDiv(showDivId , moduleEvent , position);} , 100); <br>거짓을 반환합니다. <br>} <br>} <br>if ("" == this._instance){ <br>this.init(); <br>} <br>this._module.showDiv = $("#" showDivId); <br>if (위치 유형 == '정의되지 않음'){ <br>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}; <br>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"}; <br>} <br>else{ <br>this._css.coverIframe = {'position':'absolute',"height" : position.height, "width":position.width , "top": position.top , "왼쪽":position.left,'zIndex':7}; <br>this._css.coverd = {"zIndex" : 10 , "position" : "absolute" , "height" : position.height, "width":position.width , "top": position.top , "left" ":위치.왼쪽}; <br>} <br>for (var i in moduleEvent){ <br>if (typeof moduleEvent[i].idName != "undefine") { <br>$("#" moduleEvent[i].idName). 바인딩(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]); <br>} <br>if (typeof moduleEvent[i].idObj != "정의되지 않음") { <br>$(moduleEvent[i].idObj).bind(moduleEvent[i].eventName , this._event[moduleEvent [i].do메소드]); <br>} <br>} <br>this._module.backGroundDiv.show(); <br>showDivFront = this._module.showDiv; <br>cssParam = this._css; <br>coveredIframe = this._module.coverIframe; <br>this._module.backGroundDiv.animate({opacity:0.75},"normal" , function(){coveredIframe.css(cssParam.coverIframe);showDivFront.show();}); <br>this._module.showDiv.css(this._css.coverd); <br>}, <br>resizeWindow: 함수(){ <br>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"}; <br>this._module.backGroundDiv.css(this._css.mask); <br>}, <br>closeDiv : 함수(){ <br>this._module.coverIframe.css(this._css.normalIframe); <br>this._module.showDiv.hide(); <br>hidebBackGroundDiv = this._module.backGroundDiv; <br>this._module.backGroundDiv.animate({opacity:0},"normal", function(){hidebBackGroundDiv.hide();}); <br>} <br>}; <br> </div> <br>댓글을 보고 몇 가지 사용법을 추가했습니다. <br><br>다음은 jquery 프레임워크를 도입하지 않고도 동일한 효과를 얻는 프로그램입니다. <br><br>소개 파일<br><script src="/js/jquery.js"></script>