루미님 팝업창 간단한 질문입니다.
본문
https://sir.kr/g5_plugin/6533?page=4
원본은 위와 같고요 버튼을 누르면 팝업을 띄우는 내용 입니다.
스크립트 부분은 아래와 같습니다. 보시면 알겠지만 popup_01, popup_02, popup_03 총 3가지의 팝업창이 정의되고 있습니다.
document.getElementById("popup_01").onclick = function() {
rumiPopup.popup({
width : 80,
height : 600,
fadeIn : true,
fadeinTime : 500,
url : g5_url+"/DEMO/rumipopup/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() {
}
});
};
document.getElementById("popup_02").onclick = function() {
rumiPopup.popup({
width : 80,
height : 600,
fadeIn : true,
fadeinTime : 500,
url : g5_url+"/DEMO/rumipopup/popup_01.php",
title : "새로고침 버튼이 없는 팝업창",
buttonView : true,
reloadBtn : false,
button : {
"닫기" : function(){
rumiPopup.close();
},
},
open : function(){
$("div.rumiButton button:contains('닫기')").css({"background":"#555"});
$("div.rumiButton button:contains('삭제')").css({"background":"#555"}).hide();
},
close : function() {
}
});
};
document.getElementById("popup_03").onclick = function() {
rumiPopup.popup({
width : 80,
height : 600,
fadeIn : true,
fadeinTime : 500,
url : g5_url+"/DEMO/rumipopup/popup_01.php",
title : "새로고침 버튼이 없는 팝업창",
buttonView : true,
reloadBtn : false,
button : {
"닫기" : function(){
rumiPopup.close();
},
},
open : function(){
$("div.rumiButton button:contains('닫기')").css({"background":"#555"});
$("div.rumiButton button:contains('삭제')").css({"background":"#555"}).hide();
},
close : function() {
}
});
};
이걸 호출하는 부분은
<button type="button" id="popup_01" class="btn_popup" onfocus= this.blur()><img src="<?php echo G5_THEME_IMG_URL ?>/011.png"></button>
이런식으로 하고 있는데요 문제는 제가 꽤 많은 이미지 버튼마다 서로 다른 내용을 보이게끔 하려고 하고 있다는겁니다.
그래서 id가 서로 달라야하는데
document.getElementById("popup_02").onclick = function() {
스크립트 부분에서 popup_02를 복사해서 제가 임의로 popup_022 이런 식으로 바꿔서 하려고 했더니 에러가 나더라구요. 이해가 안가는데 저게 변수 선언 아닌가요?
어쨌든 제가 원하는건 저기 가장 위 스크립트 부분에서 하나의 아이디 속성을 여러개로 만들어 각각 다른 url 내용을 팝업시키는 겁니다. 어떤식으로 해야할지 좀 알려주세요.
답변 1
popup_022로 하셨다면
그에 매칭되는 popup_022 id를 가진 버튼도 있어야됩니다
버튼도 만들어보세요
위에서처럼 호출할 때
<button type="button" id="popup_01" class="btn_popup" onfocus= this.blur()><img src="<?php echo G5_THEME_IMG_URL ?>/011.png"></button>
이 부분에서 ID 부분만 새로 만든 아이디로 변경해서 호출하면 되는거 아닌가요? 근데 이렇게 하면 버튼을 눌러도 아무 반응이 없더라구요.
아이디 맞춰서 버튼도 생성하셨다면 정상적으로 작동되야할텐데
개발자도구에서 스크립트 에러나는게 있는지 확인해보세요
