jQuery Dialog를 사용하다가 불편한점도 많고 제가 수정해서 사용하기엔 부족한점이 많아서

제가 사용하기 편한 팝업창을 만들기 위해 Dialog와 비슷하게 제작하게 되었습니다.

JQeury와 CSS로 제작되었습니다.

- 사용자버튼을 추가할 수 있습니다.

- 팝업시와 팝업닫은후에 실행할 수 있는 함수를 추가할 수 있습니다.

- 팝업이 되면 부모창이 고정이 되고 클릭 방지를 합니다.

- 팝업창의 크기를 자유롭게 설정할 수 있습니다.

- 하단 버튼영역을 숨길 수 있습니다.

- 모바일에서도 적용할 수 있습니다.

- 설치방법

plugin 폴더안에 rumipopup 폴더를 하나 만들어서 다운받은 파일 2개를 복사하면 됩니다.

- 적용방법 (그누보드 기준)

1. 적용할 페이지에 아래 코드를 추가합니다. (php)

[code]

add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/rumipopup/rumiPopup.css?ver='.G5_CSS_VER.'">', 0);

add_javascript('<script src="'.G5_PLUGIN_URL.'/rumipopup/jquery.rumiPopup.js?ver='.G5_CSS_VER.'"></script>', 0);

[/code]

2. 팝업창 (javascript)

   - "id"가 "btn_pop"인 버튼을 클릭하였을때 팝업창이 열리게 하려면 아래와 같이 작성하면 됩니다.

   - 아래 코드는 팝업창이 열리면서 sample.php 라는 파일이 불러와집니다.

[code]

$(document).ready(function() {

    $("#btn_pop").click(function() {

        rumiPopup.popup({

            width : 800, // 팝업창 가로크기

            height : 600, // 팝업창 세로크기

            fadeIn : true, // 팝업시 fadeIn

            fadeinTime : 500, // fadein 지연시간

            url : "sample.php", // 불러올 문서 URL

            title : "기본팝업창", // 팝업창 제목

            buttonView : true, // 하단 사용자 버튼 (true - 표시, false - 숨김)

            reloadBtn : true, // 새로 고침 버튼 (true - 표시, false - 숨김)

            button : { /* 사용자 버튼 추가 */

                "전송" : function(){

                    $("#rumiIframe").contents().find("#btn_submit").trigger("click");

                },

                "닫기" : function(){

                    rumiPopup.close(); // 팝업창 닫기

                },

            },

            open : function(){

                /* 팝업창이 열리면서 실행됩니다. */

                $("div.rumiButton button:contains('닫기')").css({"background":"#555"});

                $("div.rumiButton button:contains('삭제')").css({"background":"#555"}).hide();

            },

            close : function() {

                /* 팝업창이 닫힐때 실행됩니다. */

            }

        });

});

[/code]