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 :

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

&lt;div class="modal fade"&gt;
&lt;div class="modal-dialog"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
&lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
&lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.modal-content --&gt;
&lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;&lt;!-- /.modal --&gt;

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/  

Share this post

Trả lời

Email của bạn sẽ không được hiển thị công khai.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

If you agree to these terms, please click here.