rumiPopup - CSS, jQuery 로 만든 팝업창입니다.

본 문서는 2021년 12월 03일 08시 12분 07초에 최종 수정되었습니다.

반응형 지원, 외부페이지를 불러올 수 있습니다. 하단의 사용자 버튼을 추가할 수 있습니다. 버튼을 보여주거나 숨길 수 있습니다. SUU에서 배포되는 대부분의 스킨에 사용됩니다. 팝업창이 열리는 시점, 또는 닫히는 시점에 사용자 코드를 실행 할 수 있습니다.

Option : width

800

팝업창의 가로 크기를 지정합니다.
숫자만 가능하며 1 ~ 100까지는 브라우저 가로 크기에 비례하는 "%"로 설정됩니다.
101부터는 "px" 단위로 가로 크기가 설정됩니다.
브라우저가 일정 크기로 감소하면 가로크기가 "100%"로 재설정됩니다.

height

600

팝업창의 세로 크기를 지정합니다.
숫자만 가능하며 1 ~ 100까지는 브라우저 가로 크기에 비례하는 "%"로 설정됩니다.
101부터는 "px" 단위로 가로 크기가 설정됩니다.
브라우저가 일정 크기로 감소하면 세로크기가 "100%"로 재설정됩니다.

fadeIn

true

팝업창이 열릴때 FADE 효과를 적용합니다.
"true" or "false"

fadeTime

500

FADE 효과의 지속 시간입니다.
1000 = 1초

url

팝업창에서 보여줄 페이지의 URL 입니다.

title

팝업창 타이틀

팝업창의 제목이며, 좌측 상단에 표시됩니다.

buttonView

true

사용자 버튼을 숨기거나 보여줍니다.
true or false

reloadBtn

true

새로고침 버튼을 숨기거나 보여줍니다.
true or false

button

function() {}

사용자 정의 버튼

open

function() {}

팝업창이 열릴때 실행되는 함수

function() {}

팝업창이 닫히면서 실행되는 함수

새로고침 버튼, 하단 사용자 추가 버튼을 모두 사용

            rumiPopup.popup({
                width: 1000,
                height: 800,
                fadeIn: true,
                fadeinTime: 500,
                url: "popup_01.php",
                title: "기본팝업창",
                buttonView: true,
                reloadBtn: true,
                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() {
                    /* 팝업창이 닫히면서 실행됩니다. */
                }
            });

새로고침 버튼을 숨기고, 하단 사용자 추가 버튼을 모두 사용

            rumiPopup.popup({
                width: 80,
                height: 90,
                fadeIn: true,
                fadeinTime: 500,
                url: "popup_01.php",
                title: "기본팝업창",
                buttonView: true,
                reloadBtn: 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() {
                    /* 팝업창이 닫히면서 실행됩니다. */
                }
            });

새로고침 숨김, 하단 사용자 추가 버튼 숨김

            rumiPopup.popup({
                width: 800,
                height: 800,
                fadeIn: true,
                fadeinTime: 500,
                url: "popup_01.php",
                title: "기본팝업창",
                buttonView: false,
                reloadBtn: 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() {
                    /* 팝업창이 닫히면서 실행됩니다. */
                }
            });

하단 사용자 버튼에 팝업창이 열릴때 CSS를 적용합니다.

            rumiPopup.popup({
                width: 1000,
                height: 600,
                fadeIn: true,
                fadeinTime: 500,
                url: "popup_01.php",
                title: "기본팝업창",
                buttonView: true,
                reloadBtn: true,
                button: {
                    "버튼1" : function(){
                        $("#rumiIframe").contents().find("#btn_1").trigger("click");
                    },
                    "버튼2" : function(){
                        $("#rumiIframe").contents().find("#btn_2").trigger("click");
                    },
                    "버튼3" : function(){
                        $("#rumiIframe").contents().find("#btn_3").trigger("click");
                    },
                    "버튼4" : function(){
                        $("#rumiIframe").contents().find("#btn_4").trigger("click");
                    },
                    "닫기" : function(){
                        rumiPopup.close();
                    }
                },
                open: function() {
                    /* 팝업창이 열리면서 실행됩니다. */
                    $("div.rumiButton button:contains('닫기')").css({"background":"#555"});
                    $("div.rumiButton button:contains('버튼1')").css({"background":"#dd6666"});
                    $("div.rumiButton button:contains('버튼2')").css({"background":"blue"});
                    $("div.rumiButton button:contains('버튼3')").css({"background":"red"});

                    $("div.rumiButton button:contains('삭제')").css({"background":"#555"}).hide();
                },
                close : function() {
                    /* 팝업창이 닫히면서 실행됩니다. */
                }
            });