Hướng dẫn dùng dialog popup với bootstrap

Hướng dẫn dùng dialog popup với bootstrap

Hướng dẫn dùng dialog trong bootstrap

Bước 1 :Sau khi web bạn đã chèn các thư viện js,css của bootstrap vào : [code type=php] <link href=”http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css” rel=”stylesheet” media=”screen”> <script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script> <script src=“http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js”></script> [/code] Bước 2: Tạo button để click hiện dialog [code type=php]
<a href="#" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#basicModal">Click to open Modal</a>
[/code] Bước 3: Bạn xác định rõ cấu trúc của modal dialog trong boostrap gổm các phần chính sau : [code type=php] <div class=”modal fade”> <div class=”modal-dialog”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button> <h4 class=”modal-title”>Modal title</h4> </div> <div class=”modal-body”> <p>One fine body…</p> </div> <div class=”modal-footer”> <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button> <button type=”button” class=”btn btn-primary”>Save changes</button> </div> </div><!– /.modal-content –> </div><!– /.modal-dialog –> </div><!– /.modal –> [/code] sẽ có 3 phần modal-header,modal-body,modal-footer. Để dùng dialog với remote content  từ 1 trang html khác. Bạn có thể tham khảo chi tiết từ bài này  http://tutsme-webdesign.info/bootstrap-3-1-and-modals-with-remote-content/  
Đánh giá bài viết

Share this post