팝업을 디비에서 불러와서 Modal에서 다 보여주고 싶은데, 그냥 창 띄우는거 말고, Modal로 작업하는법이다.
이건 좀 노가다 성이 있음...
밑에처럼 모달로 겹치게 뜨게 하고, 클릭해서 움직일수있게 만들고 싶다.
이 팝업의 순서는
DB에서 원하는 값들을 가져와서 Loop를 돌면서 modal 를 생성해서, 숨겨놓고, 쿠키 값이 없으면 보여준다.
페이지 로드 => DB조회 값 가져옴 => 모달생성 => 쿠키 확인 => 쿠키에 없는거만 보여줌
머, 이런식이다. 각 모달 id값을 게시판 번호로 붙여서 여러개 만들었다.
(이 방법을 추천하진 않는데.... 다른 방법은 복잡해서...그냥 이렇게 했다.)
먼저, 움직이게 하기 위해서는 jquery-ui.js 를 추가하고, draggable() 쓰면 된다.
jquery-ui 추가
| <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(document).on('ready', function () { //모달 움직이게 하려면, draggable(); 하면 된다. $("#popup_no").draggable(); }); </script> | cs |
나같은 경우는 jstl로 디비에서 불러온 값을 넣어줄거다.
그래서 db에 있는 값들을 forEach써서, 모달로 다 만들어 준다.
style="display:none;" 이 있는데, 처음에 모달은 만들어 놓기는 하고, 안보이게 해놓았다.
그리고, "오늘 더이상 열지 않기" 쿠키값이 없으면 보여주고, 있으면 안보여주게 만들었다.
모달 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!--jstl로 값 불러와서 Loop돌려서 모달 만듬--> <c:forEach var="popup" items = "${list}" varStatus="status"> <!--여긴모달부분--> <div class ="popup" id ="popup_${popup.no}" style="display:none; position:absolute; top:${(status.count-1)*100+150}px; left:${(status.count-1)*150+100}px; width:470px; height:445px; border:1px solid #ccc; background-color:#ffffff; z-index:100"> <div style="background-color:#DDDDDD; padding-bottom:10px; padding-top:10px; text-align:center;"><span><Strong>${popup.memoTitle}</Strong></span></div> <div style="overflow-y:scroll; padding:10px; width:469px; height:363px;"> ${popup.memo} </div> <div style="cursor:pointer;background-color:#DDDDDD;text-align: center;padding-bottom: 10px;padding-top: 10px;"> <span class="pop_bt_nomore" onClick="close_pop_allday(true, ${popup.no});"> 오늘 더이상 열지 않기 </span> | <span class="close_popup" onClick="close_pop_allday(false, ${popup.no});" > 닫기 </span> </div> </div>
<!--End Modal--> </c:forEach> | cs |
위에 모달은 맨 처음 사진처럼 만들어준다.
스타일에 보면,
top:${(status.count-1)*100+150}px; left:${(status.count-1)*150+100}px;
위에처럼 써놓은게 있는데,
이건, status는 순서대로 가져오는 값의 인덱스 번호라고 생각하면 된다. 1,2,3,4, 이렇게 값이 있으므로,
애들 가지고, 계산해서, 처음 보이는 위치를 세팅해주었다.
그리고, "닫기", "오늘 더이상 열지 않기" 눌렀을 시에, 않보이게 하는거다.
그리고, "오늘 더이상 열지 않기" 클릭시에는 쿠키까지 생성해 놓는다.
자, 밑에 설명을 하자면,
close_pop_allday 라는 펑션을 만들었다.
그리고, 그냥 닫기 눌렀을때는 false 값을
오늘 그만보기 눌렀을때는 true 값을 받는다.
그리고, 받을때, popup_no 를 같이 받아서, 번호를 가지고 세팅한다.
setCookie 펑션은 퍼온거임.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script> //Cookie Setting function setCookie(cookie_name, value, days) { var exdate = new Date(); exdate.setDate(exdate.getDate() + days); // 설정 일수만큼 현재시간에 만료값으로 지정 var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString()); document.cookie = cookie_name + '=' + cookie_value; } //팝업 Close 기능 function close_pop_allday(flag, popup_no) { _this = $(this); var popupString = "popup"+popup_no; if ( flag == true ) { //쿠키세팅(그냥닫기 오늘안보기) setCookie("popup"+popup_no,"end",1); $("#popup_"+popup_no).hide(); }else{ //false로 들어오면 그냥 숨기기만 $("#popup_"+popup_no).hide(); } }; $(document).on('ready', function () { //팝업 쿠키확인후 보여주기 <c:if test="${null ne list}"> <c:forEach var="popup" items = "${list}" varStatus="status"> var popup_no = ${popup.no}; if ($.cookie('popup'+popup_no)!="end"){ //쿠키없는거만 보여주기 $("#popup_"+popup_no).show(); $("#popup_"+popup_no).draggable(); } </c:forEach> </c:if> }); </script> | cs |
예로, 게시물 번호가 11, 12 이다.
그리고, $(document).on('ready', function ()
안에 넣어준다. document 안에 넣어주면 로드할때 항상 실행한다.
그리고, forEach로 돌면서, 쿠키명 popup11, popup12 쿠키가 있는지 확인하고,
없으면, show 해서 보여주는거다.
$("#popup_11").show();
$("#popup_11").draggable();
$("#popup_12").show();
$("#popup_12").draggable();
그리고, draggable해서 움직이면서 뒤에꺼도 볼수있게 해주는거다.
생성된 태그를 보면 위에처럼 되어있을거다.
id값을 저렇게 남발하는게 안좋다고는 하는데, 모달로 여러개 띄우줄때는 이게 젤 간편한 방법인거 같다.
