일반 Cross Browser DHTML Modal Dialogs For Web Apps

웹페이지를 만들 때 많이 쓰이면서도 지탄의 대상이 되는것이 있습니다. 바로 페이지를 접근 할 때 마다 뜨는 팝업창들이죠.

팝업창을 사이트에 꼭 필요한 부분에만 적절히 사용한다면 그것만큼 사이트의 주체가 방문자에게 무엇인가를 알릴 수 있는 좋은 방법은 없을 겁니다. 그런점을 악용해 광고나 이벤트성 팝업을 난발하는 사이트가 많아 진게 사실입니다.

오늘 소개할 내용은 Modal Dialogs 에 대한 내용입니다. 모달창은 팝업창과 비슷하지만 약간 다른 형태를 가지게 되죠. 창이 떠 있으면 부모창의 어떤 것도 제어가 안되는 그런 말이죠. 그런 모달 다이얼로그는 IE 브라우저에서 제공되는 기능중에 하나죠. 하지만 요즘처럼 IE 이외에 타 브라우저가 많아진 상태에서 기존 IE 호환 다이얼 로그로 작성된 페이지에서는 오동작을 하게 되니 문제가 생깁니다. ^^

그런 문제를 개선해서 만들어진게 subModal 이라고 불리는 것이구요. 서브모달의 개발자는 자신도 IE의 모달창을 좋아해서 쭉 써오다 크로스 브라우저 환경에서 동작을 하지 않아 subModal 을 만들게 됐다고 하네요 ^^;
(짧은 영어 실력이라 제대로 읽었는지 하하하~)

실제 사용법과 활용법은 원본글의 일부를 발췌 했습니다. 실제 써 보면 참 유용하게
많이 쓰일 수 있을것 같던군요. 물론 팝업창을 대체 하는것은 아니고 모달창이니
나름 쓰이는 용도가좀 다르겠지만. ^^;;

우선 한번 빠져~ 봅시다! ^^

How does it work?

The subModal works by placing a semi-transparent div over the browser, blocking access to the content below while still providing visibility. This maintains state and doesn’t make someone feel disoriented or lost by moving them completely to another page. Their frame of reference is kept while allowing them to perform a new task (usually closely associated with the content below).

Another div is layered and centered on top of the mask. This div contains an iframe which defaults to a “now loading” page. In my applications I usually place an animated gif inside of this page to make it appear the server is doing something while the user waits.

Finally the iframe’s source is swapped with the page you wish to display. When this page is loaded into the iframe it’s title is swapped with our fake title bar and displayed.

Note that this works best when used in concert with a scrollable div underneath. All of my apps make use of this layout technique. It’s rare that the browser window scrolls. This code supports scrolling the entire browser window, but I don’t recommend it.

Where does it work?

I’ve personally tested this technique with IE 6, FireFox 0.9+, and Opera 7. A good friend of mine tested it on Safari and also reports it works there. In theory it should work with IE 5.5, but I don’t have a 5.5 machine to test on currently.

UPDATE

Opera 7 works but with a hack. Since Opera’s css support doesn’t include opacity I’m using a 24 bit transparent PNG file for the demo. If you don’t care about Opera you can comment this out and it will still work in FireFox, IE, and Safari. I like that method better since you have full control over the mask color and opacity right from the CSS file.

View a demo

How do I use it?

First you might want to download the code. After that it’s as easy as including references to a couple files and inserting some HTML into your page.

At the head of your file you’ll want to add the following references…

<head>
    <link rel="stylesheet" type="text/css" href="subModal.css" />
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript" src="subModal.js"></script>
</head>

The css contains sizing and display styles for the popup elements.

Common.js contains standard functions I find useful such as attaching event handlers and obtaining the browser’s dimensions.

subModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The load event initializes dhtml objects that are reused when showing, hiding, or resizing the window.

The following HTML also needs to be included in your file. I generally do it at the bottom of the page.

This code could be generated dynamically by the javascript, but for now I like it in HTML.

<div id="popupContainer">
  <div id="popupInner">
    <div id="popupTitleBar">
      <div id="popupTitle"></div>
      <div id="popupControls">
        <img src="close.gif" onclick="hidePopWin(false);" />
      </div>
    </div>
    <iframe src="loading.html" style="width:100%;height:100%;background-color:transparent;" 
      scrolling="auto" frameborder="0" 
      allowtransparency="true" id="popupFrame" 
      name="popupFrame" width="100%" height="100%">
    </iframe>
  </div>
</div>

Now that everything’s in place all you have to do is add something that’s going to call the function to show the modal.

This is accomplished by doing the following

showPopWin('your_url_here.html', width, height, callback_function);

The first argument is the file to load, followed by width and height (integers). Any content that overflows these dimensions will scroll inside the modal, like a real window.

The fourth argument allows you to pass a javascript function that will be called when the window is closed ? by calling hidePopWin(true). hidePopWin will not call the return function by default. This is useful for cancel button functions.

Conclusion

I’ve sort of glossed over the the DHTML, so if you have questions check out the code or ask me a question on the google group. In real-world implementations I usually wrap everything inside of a div that throws a shadow over the transparent mask, which adds to the floating effect.

I’m sure some of you are already thinking about how you can put this to use and modify it. Go right ahead! Please just drop me a line if you use it.

I hope it’s as useful to you as it is to me.

Bonus round, the callback function

Updated on 1/11/07

I’ve added a quick write-up about how to use the subModal callback function here.