팝업창 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

팝업창 정보

팝업창

첨부파일

rumiPopup.zip (53.5K) 140회 다운로드 2020-01-31 15:45:31
테스트한 버전5.3
호환 가능 버전그누보드외

본문

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

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

 

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

 

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

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

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

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

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

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

 

- 설치방법

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

 

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

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


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);

 

2. 팝업창 (javascript)

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

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


$(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() {
                /* 팝업창이 닫힐때 실행됩니다. */
            }
        });
});

 

추천
9

댓글 전체

아~ 전 홈페이지 초기 진입시 나오는 팝업 플러그인 인줄 알았습니다.
이런것도 있었네 하고 신기할 따름입니다.
답글 감사합니다. 나중에 시도 해봐야겠네요
루미님 위에 질문 했던 사람입니다.
http://dcomma.mireene.co.kr/g54/
이런 방식으로 사용하려고 하고 있는데요 루미님 팝업 적용 부분은 쭉 내려가다보면 "띠지 종류 소개" 부분입니다.  여기보시면 1,2,3,4번까지는 잘 되는데 5번 크라프트띠지 부터는 팝업이 안뜨거든요.
스크립트 부분에서
document.getElementById("popup_055").onclick = function() {
이런식으로 pupup_55 을 설정했고
호출부분에서도
<button type="button" id="popup_055" class="btn_popup" onfocus= this.blur()><img src="<?php echo G5_THEME_IMG_URL ?>/015.png"></button>
이런 식으로 설정 했습니다.
근데 꼭 루미님이 설정한 1,2,3,5,6 까지는 창이 잘 뜨는데 이렇게 새로 설정해서 창을 늘리려고 하면 먹히질 않아요.
어째서인지 답변 가능하면 꼭 좀 부탁드립니다. 자세한 내용은 페이지에서 소스보기로 하시면 될거같아요.
333라인에서 "ncaught TypeError: Cannot set property 'onclick' of null" 오류입니다.

코드를 확인해 보시면 알겠지만 아래와 같이 onclick 이벤트를 주도록 되어 있는데.

document.getElementById("popup_05").onclick = function()

"popup_05"값을 가진 ID속성이 없다는 오류 입니다.

헤딩 오류 나는 코드를 삭제하거나 "popup_05"값을 가진 ID 속성을 추가하시면 됩니다.

참고로, 이 에러는 팝업과는 무관한 오류입니다.
전체 503
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT