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

Posted by Minh Tuyết on 14:54 in thu-thuat-seo | Comments : 0

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/