루미집사님의 루미팝업 이용 문의
본문
루미집사님의 팝업을 일반 게시판에 사용하려고 하는데요.
아래와 같이 하면 첫번째만 되네요.
리스트 각 아이디별로 팝업을 띄우려면
getElementById("popup_01") 과
url : $(this).attr('data-id') 를
어떻게 고쳐야하는지요?
url : $(this).attr('data-id')
이건 이렇게 넣으니 되는것 같은데 맞는건지요?
<script>
$(function () {
document.getElementById("popup_01").onclick = function() {
rumiPopup.popup({
width : 800, // 팝업창 가로크기
height : 600, // 팝업창 세로크기
fadeIn : true, // 팝업시 이펙트종류
fadeinTime : 500, // 이펙트 지연시간
url : $(this).attr('data-id'), // 불러올문서
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() {
}
});
};
});
</script>
<?php for ($i=0; $i<count($list); $i++) { ?>
<div id="popup_01" data-id="<?php echo $board_skin_url."/popup.php?bo_table=".$bo_table."&wr_id=".$list[$i]['wr_id']; ?>">
<?php echo $list[$i]['wr_subject']; ?>
</div>
<?php } ?>
답변 5
얼핏 봤을 때는
팝업 대상을 아이디 값으로 접근해서 가져오는 것 같은데요
아이디는 윈도우당 하나씩만 같은 이름으로 지정되어야 하는 걸로 알고 있습니다 ( 주민 등록 번호와 같이 )
그러니
선택된 대상으로 가져올 때는
직접 찍은 선택된 곳이나 혹은 클래스명을 이용해서 원하는 것을 지명해서 찾는 ( 이름과 같은 == 동명이인들 많아도 쓸수 있듯이 ) 방식으로 변경해야할 것 같습니다
자바스크립트 소스부의 아래 부분
document.getElementById("popup_01").onclick = function() {
php혼합 소스부의 아래 부분
<div id="popup_01" data-id="
위의 두부준을 고쳐야 되지 않을까 싶습니다
자바스크립트 소스의 아이디를 클릭해서 실행시키는 이벤트 동작부를 같은 명의 클래스를 가진 모든
것을 클릭해도 될수 있도록 확장
$(".popupLayer").on("click", function(e){
// 나머지 소스
});
위의 클릭 이벤트가 되지 않는다면 클래스 명으로 온클릭하는 소스를 찾아서 변경해 보세요
PHP 혼합부 소스에 클래스 추가
<div id="popup_01" class="popupLayer" data-id="
@예뜨락 님 댓글 감사합니다.
올려주신 코드 참고해서 아래와 같이 해결하였습니다.
정말 감사합니다.
혹 저처럼 필요하신분들 계실수도 있으니 전체 소스 남깁니다.^^;
<?php
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/rumiPopup.css">', 0);
add_javascript('<script src="'.$board_skin_url.'/jquery.rumiPopup.js"></script>', 0);
?>
<?php for ($i=0; $i<count($list); $i++) { ?>
<div class="popupLayer" data-id="<?php echo $list[$i]['wr_id']; ?>" data-subject="<?php echo $list[$i]['wr_subject']; ?>">
<?php echo $list[$i]['wr_subject']; ?>
</div>
<?php } ?>
<script>
$(document).on('click', '.popupLayer', function(e){
rumiPopup.popup({
width : 800, // 팝업창 가로크기
height : 600, // 팝업창 세로크기
fadeIn : true, // 팝업시 이펙트종류
fadeinTime : 500, // 이펙트 지연시간
url : "<?php echo $board_skin_url; ?>/popup.php?bo_table=<?php echo $bo_table; ?>&wr_id="+$(this).attr('data-id'), // 불러올문서
title : $(this).attr('data-subject'), // 팝업창 제목
buttonView : true,
reloadBtn : true,
button : {
"닫기" : function(){
rumiPopup.close(); // 팝업창 닫기
},
},
open : function(){
$("div.rumiButton button:contains('닫기')").css({"background":"#555"});
$("div.rumiButton button:contains('삭제')").css({"background":"#555"}).hide();
},
close : function() {
}
});
});
</script>
개인적인 생각은 이래요
캠핑장 집을 만들때 대충 만들면되자나요
집이나 빌딩을 만들면 대충만들면 안되지만
@열린이글 뭔 소린지요?
방법은 많아요
개발자의 스킬 php 자바스크립트 제쿼리 css 등등의 스킬에따라
url : $(this).attr('data-id')
소스는 대체가능 하다 생각 합니다
위 소스만으로는(개발 환경 변수를 모을때 ) 저 소스가 정답인지 판단을 할수 없는게 아니까하는 생각이죠
거슬려다면 정말 죄성 합니다
당연히 개발자의 능력에 따라 방법은 많을 수 있겠죠.
전 완벽한 정답을 찾는게 아닙니다.
제 질문에 어디 완벽한 정답 알려달라고한 문구있나요?
제가 getElementById("popup_01") 와 url : $(this).attr('data-id') 를
어떻게 고치면 가능한가 문의 드렸는데 엉뚱한 댓글???
님께서 얼마나 대단한 실력을 갖췄는지는 모르겠지만
심히 불쾌하네요.
위 소스는 글세요 저 소스로는 원하는 것을 구현 하기 가 좀 어렵씁니다
열공중님 은 자바스크립트 안에 제이쿼리 구문을 이용해서 개발을 하는것인데요
구지 위소스를 제이쿼리 소르로 바꿔야 한다면
전부 할수없고요 일부만 한다면
for 문은 반복문으로 위처럼 만들면 popup_01 동일한 값이 count($list) 생성이 되면서
id 값으로 제이쿼리에서 불러오기가 어려워요
(아이디 값은 페이지 내에서 유일 해야한다고 생각 합니다.)
그래서 제가 한다면 <div id="popup_01" 을 <div class="popup_01" 로 수정 을 하고
document.getElementById("popup_01").onclick = function() {
위소스를
$('.popup_01').click(function(){
// $(this).attr('data-id')
//<div id="popup_01" data-id='값' 을 제이쿼리에서 가져오는 방법은
data-id -뒤에 있는 단어로 가져오는 것으로 알고있습니다
var id=$(this).data('id');
//alert(id);
//console.log(id);
});
이러게 변경 하면 될듯합니다.
그리고 미흡한 답변을 드려 정말 죄성 합니다.
참고로 루미집사님의 소스 프로그인은 그리 간단이
수정개발이 힘들다고 생각됩니다
Js 파일 과 css html php파일 전부 보셔야 합니다
공부 하는것이 목적이라면
우선 기본적 디자인 클래스 프로그램 클래스
디자인 속성 프로그램속성
자바스크리트의 문법 을 간단한거부터 시작 하는 것을 추천 합니다
정말 미흡한 답변으로 기분 상하게 하여 정중히 사고 드려요
필요 하시면 전화 하시면 전화상으로 사과드릴게요
