[Bootstrap] 모달 윈도우 (Modal window)
반응형
모달 윈도우 사용을 위한 준비, Bootstrqp 및 jQuery
1 2 3 4 5 6 | <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> | cs |
모달 윈도우 기본 소스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- 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> | cs |
버튼을 이용한 모달 윈도우 열기
1 2 3 4 | <!-- Modal window button open --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Open Modal </button> | cs |
문서가 모두 로딩되면 모달 윈도우 열기
1 2 3 4 5 6 | <!-- Modal window script open --> <script> $(document).ready(function() { $('#myModal').modal(); }); </script> | cs |
반응형
'Programming > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 모달 윈도우 버튼 입력값 받아서 처리하기 (Modal window) (0) | 2015.09.10 |
|---|