[Bootstrap] 모달 윈도우 버튼 입력값 받아서 처리하기 (Modal window)
반응형
모달 윈도우를 열때 버튼에 특정값을 지정하여, 지정된 값을 모달 윈도우 내에서 불러와 활용할 수 있다
[예제소스]
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 44 | <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </head> <body> <!-- Modal windows button open --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-title="Test Title"> Open Modal </button> <!-- Modal window --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> Modal body </div> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Modal window option script --> <script> $('#myModal').on('show.bs.modal', function (event) { // myModal 윈도우가 오픈할때 아래의 옵션을 적용 var button = $(event.relatedTarget) // 모달 윈도우를 오픈하는 버튼 var titleTxt = button.data('title') // 버튼에서 data-title 값을 titleTxt 변수에 저장 var modal = $(this) modal.find('.modal-title').text('Title : ' + titleTxt) // 모달위도우에서 .modal-title을 찾아 titleTxt 값을 치환 }) </script> </body> </html> | cs |
[이해하기]
버튼을 눌렀을때 반응하는 모달 윈도우를 하나 만듭니다
이때 모달 윈도우를 열고자 하는 버튼에 data-title="Test Title" 이라는 값을 지정합니다
지정된 값을 스크립트 옵션에 의해 모달윈도우가 오픈될때 모달 윈도우의 .modal-title를 찾아 Test Title이라는 텍스트로 값을 치환하여 표시하게 됩니다
[팁]
위의 스크립트 중 event는 e와 같이 간단하게 변경하여 사용이 가능함
리스트화된 데이터들 중 특정 데이터를 받아서 모달윈도우에서 처리할때 사용하면 유용하며, input 등의 값을 입력받기에도 좋은 소스이다
반응형
'Programming > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 모달 윈도우 (Modal window) (0) | 2015.09.10 |
|---|