2013년 9월 1일 일요일

[JavaScript] ModalDialog 예제



  팝업을 띄울 때, 팝업 이외의 화면을 눌러도 반응하지 않도록 하는 방법과 팝업의 크기를 임의로 변경할 수 있는 방법을 알려드리겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * ModalDialog 호출
 * @param url
 * @param width
 * @param height
 * @param varParam
 * @param scrollYn
 * @returns
 */
function modalPop(url, width, height, varParam, scrollYn) {
    var Top = (window.screen.height - width) / 2;
    var Left = (window.screen.width - height) / 2;
    var scroll = "no";
    
    if (Top < 0)
        Top = 0;
    
    if (Left < 0)
        Left = 0;
    
    if (scrollYn == "yes")
        scroll = "yes";
    
    var Feature = "dialogWidth:" + width + "px;dialogHeight:" + height + 
                  "px;scroll:" + scroll + ";status:no;center:yes;resizable:yes;";
    
    if (varParam == null || typeof (varParam) == "undefined"
        || typeof (varParam) == "unknown" || varParam == "") {
        varParam = new Object();
    }
    
    varParam.win = window;
    
    return window.showModalDialog(url, varParam, Feature);
}

ModalDialog에서는 팝업의 크기를 임의로 변경할 수 있는 속성들이 있습니다. 이 속성들을 컨트롤하여 팝업의 크기를 변경하는 코드는 다음과 같습니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
//윈도우 로딩 시 자동실행
window.onload = function(){
    resizeTo(600,400);
};
/**
 * ModalDialog 크기변경
 * @param width
 * @param heigth
 */
function resizeTo(width, heigth){
    dialogWidth = width + 'px';
    dialogHeight = heigth + 'px';
}




댓글 없음:

댓글 쓰기