Mootools Overlay Plugin

오버레이(Overlay)란 플러그인은 웹 페이지 컨텐츠 위에 또 다른 레이어를 사용해 검게 혹은 희게 덮는 방법을 얘기합니다.
보통 폼이나 이미지, 동영상 플레이어 등을 화면과 분리해서 독립적으로 나타내고자 할때 사용하게 됩니다.

Mootools에는 오버레이 플러그인이 그렇게 많지 않습니다. 제가 언듯 보기에 2~3가지 정도 대표적인 오버레이가 있는 것으로 봤습니다.

프로젝트 때문에 오버레이 플러그인을 찾아 사용해야 됐는데, 원래 http://digitarald.de/project/squeezebox/ 에 있는 Squeeze Box를 사용했었는데 일단 오버레이와 창을 같이 쓸 수 있도록 되어 있는거라 사용하기는 편하지만, 문제가 있습니다.
오버레인 순간 뒤쪽에 자리잡은 컨텐츠 일부가 사라져 버립니다. 플래시 메뉴가 그럴때도 있고 그냥 HTML 엘리먼트들도 되어 있는 내용들이 사라지기도 합니다. 사용하긴 편하지만 눈물을 머금고 ㅠㅠ

다른 오버레이를 찾아나섭니다. http://davidwalsh.name/mootools-overlay 뭐 오래 걸리진 않습니다^^. Mootools 플러그인은 대표적인 개발자들 몇명에 의해서 만들어지고 있으니까요.

이놈은 쓰기도 쉽고 먼저 얘기 했던 Squeeze Box 에서 나타나는 문제는 없습니다. 단! 오버레이만! 됩니다.

그래서 오버레이 한뒤에 레이어로 창을 띄우는 것은 다른 플러그인을 쓰거나, 자체적으로 제작해야 됩니다.
오버레이시에도 처리되어야 할 이벤트들이 꽤 있습니다. 귀찮음만 극복된다면 꽤 괜찮은 플러그인 입니다.

아래는 예제 입니다. 참고하세요.

<script type="text/javascript" src="/lib/jsx/mootools.js"></script> <script type="text/javascript" src="/lib/jsx/overlay.js"></script>

Mootools 1.2 이상 그리고 위 페이지에서 다운받은 overlay.js 를 HTML페이지 내 포함시킵니다.

var form_overlay; window.addEvents({ 'domready': function(){ form_overlay = new Overlay(document.body,{ id: 'overlay', color: '#000', duration: 0, opacity: 0.8, zIndex: 9990, onClick: function() { this.close(); }, onOpen: function() { $('regist_form').setStyle('display','block'); }, onClose: function() { $('regist_form').setStyle('display','none'); } }); }, 'resize': function() { reposition_regform(); }, 'scroll': function() { reposition_regform(); } });

시작전 overlay에 대한 설정 부분입니다.

function open_regform() { form_overlay.open(); reposition_regform(); } function reposition_regform() { var box = $('regist_form').getCoordinates(); // box.width, box.height var doc = document.body.getScroll(); // doc.y var win = document.body.getCoordinates(); // win.width, win.height $('regist_form').setPosition( { x: (win.width / 2) - (box.width / 2), y: doc.y + (win.height / 2) - (box.height / 2) } ); }

open_regform 함수내에 form_overlay.open(); 이 오버레이를 시작하는 부분입니다.
reposition_regform 함수는 참고로 넣어놨습니다. 오버레이 이후에 폼을 띄우고 좌표를 유지시키는 방법을 참고하세요.

Mootools 의 FX나 overlay의 옵션등에 손을 보면 더 괜찮은 플러그인 만들수도 있겠네요.