2007/02/27 15:09

레이어 팝업 띄우기

2007/02/27 15:09 in 웹_TIP
layer_popup.zip
팝업창이나 alert창을 띄우면 확인 버튼이나 창 닫기 버튼을 눌러야하는 번거로움도 있고 그래서 조금 색다른 느낌의 팝업을 만들어봤습니다. allblog.net이나 여러 곳에서 사용하고 있는 방법의 레이어팝업입니다.
레이어팝업 데모보기

-- new_win.js
/**************************************************************************
  레이어 팝업 모듈            - 07. 2. 13  by Hamt -
  모든 페이지에 인클루드 되는 파일에 이 소스를 추가한다.
  <!-- new popup start -->
  <div id="dialogbackgroundlayer" style="display:none;position:absolute;z-index:11;" onclick="win.dialog_close()">
  </div>
  <div id="dialoglayer" style="display:none;position:absolute;z-index:12;">
  </div>
  <div id=message style="display:none;position:absolute;left:0px;top:0px;padding:3px;background:#cc0000;color:#ffffff;font-size:13px;font-weight:bold;z-index:100;"></div>
  <script>
  var win = new new_popup();
  </script>
  <!-- new popup end -->
/***************************************************************************/
var popup_req = false;//for popup ajax
var popup_script = false;//dialog_open 네번째 인자로, 레이어 팝업창을 띄운 직후 실행할 스크립트 값
var in_alertcount = 0;
function new_popup()
{
    this.agent_name = navigator.userAgent.toLowerCase();
    this.is_ie = ((this.agent_name.indexOf("msie") != -1) && (this.agent_name.indexOf("opera") == -1));
    this.is_gecko = navigator.product;
    this.position_x = 0;
    this.position_y = 0;

    this.dlg_bg = document.getElementById('dialogbackgroundlayer');
    this.dlg = document.getElementById('dialoglayer');
    this.msg = document.getElementById('message');
    this.dlg_bg.style.left = '0px';
    this.dlg_bg.style.top = '0px';
    this.dlg_bg.style.width = '100%';
    this.dlg_bg.style.background = "#000";
    this.dlg_bg.style.opacity = (50/100);
    this.dlg_bg.style.MozOpacity = (50/100);
    this.dlg_bg.style.KhtmlOpacity = (50/100);
    this.dlg_bg.style.filter = 'alpha(opacity=50)';
    this.dialog_open= function(url, w_width, w_height, run_script)
    {
        var height = document.body.clientHeight;
        if(!w_height) w_height = 170;
        if (this.is_gecko) height += 10;
        this.dlg_bg.style.height = height + 'px';
        this.dlg_bg.style.display = '';
        this.dlg.style.left = "50%";
        this.dlg.style.top = w_height + "px";
        this.dlg.style.marginLeft = w_width/2*-1+"px";
        if (run_script)
            popup_script = run_script;
        else
            popup_script = false;
        this.load(url);
        this.dlg.style.display = '';
    }
    this.dialog_close= function()
    {
        this.dlg_bg.style.display = 'none';
        this.dlg.style.display = 'none';
    }
    this.in_alert = function(message)
    {
        this.msg.innerHTML = message;
        this.msg.style.display = '';
        window.setTimeout(this.in_alert_hidden, 2000);
        in_alertcount++;
    }
    this.in_alert_hidden = function()
    {
        in_alertcount--;
        if(!in_alertcount)
            document.getElementById('message').style.display = 'none';
    }
    this.load = function(url) {
        popup_req= false;
        // branch for native XMLHttpRequest object
        if (window.XMLHttpRequest) {
            try {
                popup_req = new XMLHttpRequest();
            }
            catch(e) {
                popup_req = false;
            }
        }
        // branch for IE/Windows ActiveX version
        else if (window.ActiveXObject) {
            try {
                popup_req = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e) {
                try {
                    this.req= new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e) {
                    popup_req  = false;
                }
            }
        }
        if (popup_req ) {
            popup_req.onreadystatechange = this.processPopup;
            popup_req.open("GET", url, true);
            popup_req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            popup_req.send("");
        }
    }
    this.processPopup = function() {
        // only if req shows "loaded"
        var obj = document.getElementById('dialoglayer');
        if (popup_req.readyState == 4) {
            // only if "OK"
            obj.innerHTML = popup_req.responseText;
            if (popup_script)
                eval(popup_script);
        }
    }
}

주석의 내용대로 div 세개와 객체 생성 스크립트를 적당한 곳에 둡니다.
그리고 푸터 파일쯤? 암튼 적당한 곳에서 이 객체를 생성합니다.
압축해서 올린 파일에는 var win = new new_popup(); 으로 win이란 객체를 만들었구요

사용하실 함수들은
win.dialog_open('팝업 중앙에 보여질 php or html or etc 파일','<-- 이 파일의 폭', '높이(빈칸으로 두면 170px 디폴드), '팝업 띄우고 포커스를 준다든가 하는 스크립트(빈칸이면 스크립트 실행 안함)');
win.dialog_close(); 창 닫기
win.in_alert('알림 메세지'); 화면 좌측 상단에 2초간 보여질 내용입니다.
닉네임을 빼먹었으니 입력하라던가 하는 상황에 써먹으면 좋겠다 싶어서 만들었구요
이 세 함수가 다입니다.
open에서 보내진 파일을 Ajax에서 출력물을 받아다가 가운데 창 레이어의 innerHTML로 넣어주도록 동작하고 있습니다.

그런데 innerHTML에 스크립트를 넣는 경우 실행이 안되는것 같네요
그래서 저는 인클루드 되는 js파일에 레이어 안에서 필요한 함수들을 모아놓고 사용하고 있습니다.
레이어 내부에 포커스를 준다든가 하는 간단한 스크립트는 네번째 인자에 주면 동작하게 했구요

출처: phpschool.com

이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹_TIP' 카테고리의 다른 글

레이어 팝업 띄우기  (0) 2007/02/27
티스토리 시작부터 2차도메인 및 Google Apps설정까지  (3) 2007/02/26
문서  (0) 2007/01/25
명품 프리젠테이션  (0) 2007/01/19
전체화면소스(항상 같은좌표로 위치하게)  (0) 2007/01/17
onfocus='blur();' 를 한번에  (0) 2007/01/15
Posted by 감정은행
Tag , , , , , , ,
Trackback 0 Comment 0
prev Prev 1 ... 300 301 302 303 304 305 306 307 308 ... 352 Next next