[phil-story] Always Fighting 

'모달창'에 해당되는 글 1건

  1. 2008.07.01 [javascript] 모달창(showmodaldialog) 띄우고 값 받기
IT_Expert/Tag-Script | Posted by 낫기법필 2008. 7. 1. 19:04

[javascript] 모달창(showmodaldialog) 띄우고 값 받기

# 띄우기 위한 창의 소스
아래처럼 호출하는 function과 모달창 듸우는 function을 달리했다.
그리고 호출하는 function에서 값을 받아서 처리하게 했다.

// 호출
function ShowSearchModalForm(){
    var txt = document.getElementById('txtViewByApp').value;
    var strUrl = "FrmSearch_Modal.aspx?txt=" + txt;
   
    var rtnVal = openModal(strUrl,"FrmSearch_Modal", 500, 400,'');
    if(typeof(rtnVal) == "undefined") {
        return false;
    }
    else if(rtnVal == 'err') {
        return false;
    }
    else
    {
        document.getElementById('txtviewByAppId').value = rtnVal["id"];
        document.getElementById('txtViewByApp').value = rtnVal["name"];
        return false;
    }
}
// Modal 창 호출
// 화면의 해상도에 다른 창의 위치를 가운데로 위차하게 하는 소스와
// 에러 처리도 포함.
function openModal(fileName,windowName,theWidth,theHeight, etcParam) {
    var objNewWin;
    var x = theWidth;
    var y = theHeight;
    try{
       
        var sy = window.screen.height / 2 - y / 2 - 70;
        if (etcParam == 'fix') {
            etcParam = "toolbar:no; location:no; directories:no; status:yes; menubar:no; scrollbars:yes; resizable:no; help:no; edge:sunken";
            var sy = window.screen.height / 2 - y / 2 - 40;
        }

        var sx = window.screen.width  / 2 - x / 2;

        if (sy < 0 ) {
            sy = 0;
        }
       
        var sz = "; top=" + sy + "; left=" + sx;

        if (windowName == "newWindow") {
            windowName = new String(Math.round(Math.random() * 100000));
        }

        var vRetval = window.showModalDialog(fileName, windowName, etcParam + "; dialogWidth:" + x + "px; dialogHeight:" + y + "px" + sz);
       
        return vRetval;
    }
    catch(ex){
        alert('창 오픈 중 에러발생 [ ' + ex.message + ' ][ ' + ex.name + ' ][ ' + ex.number + ' ][ ' + ex.description + ' ]');
        return 'err';
    }
}

# 띄워진 창의 소스
여기서는 보내고자 하는 부분의 처리가 이루어진 이벤트(function)을 타게한다.
아래와 같이 띄우게한 폼에 값을 전달한다.

function fn_SearchApply(id, name) {   
    var strReturn = new Array();
    strReturn["id"] = id;
    strReturn["name"] = name;
                   
    window.returnValue = strReturn;
    window.close();
}

# 주의사항
모달창에서는 버튼 및 기타 이벤트가 일어날 시에 새 창이 띄워질 수도 있다.
따라서 그러한 문제점을 해결하기 위해
<head>
<base target="_self">
</head>
이러한 코드를 하나 삽입을 하는 것이다.


모달 창과 모달리스 창의 각각의 장단점이 있지만 잘만 활용하면 좋을 것이다.

오늘도 하나 정리했군.

[출처] 자작~

티스토리툴바