티스토리 뷰

jquery

jquery 모달 modal 띄우고 닫기

xemaker 2018. 10. 11. 15:25

jquery 모달 modal 띄우고 닫기


<button type="button" id="btnOpen">모달오픈</button>


<div id="popupModal">

<table class="" id="tempList">

<colgroup>

<col width="">

<col width="">

<col width="">

</colgroup>

<thead>

<tr>

<th class="">컬럼헤더0</th>

<th class="">컬럼헤더1</th>

</tr>

</thead>

<tbody>

<tr>

<td>컬럼0</td>

<td>컬럼1</td>

</tr>

</tbody>

</table>

<div class="footer">

<a href="#" id="btnClose" data-dismiss="modal"><spring:message code='system.close'/></a>

</div>

</div>


//모달 띄우기

$("#btnOpen").click(function(){

$("#popupModal").modal('show');

});


//테이블 row를 클릭했을때 값을 처리하고 modal를 닫는다.

$("#tempList tbody").on("click", "tr", function(){

alert( $(this).find("td:eq(0)").text() );

$("#btnClose").trigger('click');

});


여기서 <spring:message code='system.close'/> 는 메세지 프로퍼티 파일의 내용입니다. 


즉, /WEB-INF/messages 폴더에 파일이 존재합니다. 위치는 설정파일에서 변경할 수 있습니다.


/WEB-INF/messages/message.properties 파일을 열어보면


system.close=닫기


이렇게 되어 있습니다.

'jquery' 카테고리의 다른 글

html focus  (0) 2019.02.09
jquery select (drop down list) option 검색 - jquery chosen  (0) 2018.10.26
[jQuery] td:eq(index) 테이블 선택 데이터 정보 가져오기  (0) 2018.10.11
jquery serialize  (0) 2018.10.01
jquery masonry  (0) 2017.12.28
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
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
글 보관함