IE6 지원하는 jquery 레이어 팝업

게시자: 대문 demun 카테고리: 퍼블리셔/jQuery 2015.05.22 09:10

지금에서야 IE6 을 지원하는 레이어팝업이 무슨 소용이 있겠냐만은.....이번 실무가 그렇다보니 어디 좋은게 없나 찾아보다가 적당한것이 있어 알려드립니다.

http://swip.codylindley.com/ 에 보시면 popup window 가 있고, DOM window  가 있는것을 알 수 있습니다.





popup window 는 일반 윈도우 팝업창을 띄우는것이 DOM window 가 일반 레이어 팝업입니다. 

테스트해본결과 이 DOM window 레이어팝업은 IE6에서도 정상작동되는것을 확인 했습니다.


http://swip.codylindley.com/DOMWindowDemo.html 에 보시면 팝업에 대한 데모, 옵션 등등을 볼 수 있습니다.

제일먼저 jquery 를 로드하고, jquery.DOMWindow.js 를 로드하면 됩니다.

맨 윗줄에 보시면 기본 사용법이 나와 있습니다.

보시듯 셀렉터에 openDOMWindow 매소드를 주고 그 안에 옵션을 넣으면 됩니다. 그 뒤는 팝업을 닫는 매소드 입니다.


$(selector).openDOMWindow({options}) & $(selector).closeDOMWindow({options})


데모코드를 보시면 아래와 같습니다.


<p><a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a></p>

<script type="text/javascript"> 
	$('.defaultDOMWindow').openDOMWindow({ 
		eventType:'click', 
		loader:1, 
		loaderImagePath:'animationProcessing.gif', 
		loaderHeight:16, 
		loaderWidth:17 
	}); 
</script> 

<div id="inlineContent" style=" display:none;"> 
	<p>Inline Content</p> 
	<p>Click overlay to close window</p> 
	<p>Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat. </p> 
	<p>Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem. </p> 
</div>


defaultDOMWindow 클래스를 클릭하면 팝업이 뜨고, 이 클래스를 선택하고 옵션을 지정했습니다.

href 값으로 inlineContent 아이디를 바라보고 있으니 inlineContent 아이디의 디비젼이 열리는 겁니다.

옵션은 Options 을 보시면 나와 있습니다.



옵션의 예를 보면


<script type="text/javascript"> 
	$('.defaultDOMWindow').openDOMWindow({ 
		eventType:'click', 
		borderColor:'#ccc'
	}); 
</script>


처럼 지정하면 됩니다.

Example 5 를 보시면 닫는 메소드가 나옵니다.


$('.example5closeDOMWindow').closeDOMWindow({eventType:'click'});


closeDOMWindow 매소드만 지정하면 됩니다. 또한 Example 9를 보시면 메소드가 아닌 closeDOMWindow 클래스만 부여하면 따로 옵션값을 지정하지 않아도 기본 동작을 합니다.


<p><a href="#" class="closeDOMWindow">close</a></p>


사용법은 그리 어렵지 않습니다. 만약 IE6 을 지원해야 한다면 이걸 사용해보시길 권합니다.


신고

댓글