팝업창 정보
팝업창관련링크
첨부파일
테스트한 버전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
9
댓글 전체
감사합니다.
감사합니다..적용을 해보도록 하겠습니다
적용했습니다. 정말 멋집니다.^^
오 한번 해봐야겠네요
감사합니다
감사합니다
대단합니다.ㅉㅉㅉ
감사합니다.
감사합니다.
사용해봐야겠네요.
사용해봐야겠네요.
집사님 항상 고맙습니다.
좋은것들 많이 주셔서 감사합니다.
배부르고 뿌듯합니다. ㅎ
배부르고 뿌듯합니다. ㅎ
"1. 적용할 페이지에 아래 코드를 추가합니다. (php)"
이부분이 어디에 추가하시라는 거죠??
인덱스인가요?
이부분이 어디에 추가하시라는 거죠??
인덱스인가요?
적용할 페이지에 추가하면 됩니다. php 코드이기 때문에
"<?php" 와 " ?>" 사이에 추가하면 됩니다.
"<?php" 와 " ?>" 사이에 추가하면 됩니다.
아~ 전 홈페이지 초기 진입시 나오는 팝업 플러그인 인줄 알았습니다.
이런것도 있었네 하고 신기할 따름입니다.
답글 감사합니다. 나중에 시도 해봐야겠네요
이런것도 있었네 하고 신기할 따름입니다.
답글 감사합니다. 나중에 시도 해봐야겠네요
감사합니다.
감사합니다.^^
루미님 정말 잘쓰고 있는데요 모바일 반응형으로 적용하려면 어떻게 해야할까요?
width와 height를 100이하로 설정하면 %로 적용됩니다.
모바일에서는 100으로 하면 디바이스 전체화면으로 팝업됩니다.
모바일에서는 100으로 하면 디바이스 전체화면으로 팝업됩니다.
루미님 위에 질문 했던 사람입니다.
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 까지는 창이 잘 뜨는데 이렇게 새로 설정해서 창을 늘리려고 하면 먹히질 않아요.
어째서인지 답변 가능하면 꼭 좀 부탁드립니다. 자세한 내용은 페이지에서 소스보기로 하시면 될거같아요.
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 속성을 추가하시면 됩니다.
참고로, 이 에러는 팝업과는 무관한 오류입니다.
코드를 확인해 보시면 알겠지만 아래와 같이 onclick 이벤트를 주도록 되어 있는데.
document.getElementById("popup_05").onclick = function()
"popup_05"값을 가진 ID속성이 없다는 오류 입니다.
헤딩 오류 나는 코드를 삭제하거나 "popup_05"값을 가진 ID 속성을 추가하시면 됩니다.
참고로, 이 에러는 팝업과는 무관한 오류입니다.
항상 좋은 자료 감사합니다~!
랜딩페이지에 사용하면 굿
감사합니다.
항상 감사합니다.
추천드립니다~
추천드립니다~