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() {}
- 팝업창이 열릴때 실행되는 함수
close
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() {
/* 팝업창이 닫히면서 실행됩니다. */
}
});