루미님 팝업창 간단한 질문입니다.

https://sir.kr/g5_plugin/6533?page=4

원본은 위와 같고요  버튼을 누르면 팝업을 띄우는 내용 입니다. 

스크립트 부분은 아래와 같습니다.  보시면 알겠지만 popup_01, popup_02,  popup_03 총 3가지의 팝업창이 정의되고 있습니다. 

Copy
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() {
            }
        });
    };

    

이걸 호출하는 부분은 

Copy
<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개 / 댓글 2개

popup_022로 하셨다면

그에 매칭되는 popup_022 id를 가진 버튼도 있어야됩니다

버튼도 만들어보세요

답변에 대한 댓글 2개

위에서처럼 호출할 때
<button type="button" id="popup_01" class="btn_popup" onfocus= this.blur()><img src="<?php echo G5_THEME_IMG_URL ?>/011.png"></button>

이 부분에서 ID 부분만 새로 만든 아이디로 변경해서 호출하면 되는거 아닌가요? 근데 이렇게 하면 버튼을 눌러도 아무 반응이 없더라구요.
아이디 맞춰서 버튼도 생성하셨다면 정상적으로 작동되야할텐데
개발자도구에서 스크립트 에러나는게 있는지 확인해보세요

답변을 작성하려면 로그인이 필요합니다.