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 :

<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>

<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span>

Bước 2: Tạo button để click hiện dialog

<div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"btn btn-lg btn-success"</code></div>
<div class="line number2 index1 alt1"><code class="xml spaces">   </code><code class="xml color1">data-toggle</code><code class="xml plain">=</code><code class="xml string">"modal"</code></div>
<div class="line number3 index2 alt2"><code class="xml spaces">   </code><code class="xml color1">data-target</code><code class="xml plain">=</code><code class="xml string">"#basicModal"</code><code class="xml plain">&gt;Click to open Modal&lt;/</code><code class="xml keyword">a</code><code class="xml plain">&gt;</code></div>

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 :

<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 -->

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/