? 通過使用模態(tài)框效果實現(xiàn)彈出框的登錄效果：?

?? 效果圖：

?

<form id="formmodal" action="#"><h3>過渡效果（Transition）模態(tài)框插件的使用案例：</h3><!--按鈕觸發(fā)模態(tài)框--><button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">登錄<!--模態(tài)框--></button><!--data-backdrop="static/false"點擊模態(tài)框外不會關(guān)閉默認(rèn)為關(guān)閉--><!--data-remote="name.htm"默認(rèn)是false，如果為有效url的話會將頁面嵌入到整個模態(tài)框 --><!--data-keyboard="false"是指按鍵盤上的【esc】無效默認(rèn)是true則關(guān)閉模態(tài)框--><div class="modal fade" data-backdrop="static" data-remote="false" data-keyboard="false"data-show="show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModelLabel"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel"><!--模態(tài)框標(biāo)題-->登錄</h4></div><div class="modal-body" style="text-align: center;">用戶名：<input type="text" id="txtUserName" /><br /><br />密&nbsp;&nbsp;碼：<input type="text" id="txtPassword" /></div><div class="modal-footer"><button type="button" class="btn btn-primary">重置</button><button type="button" class="btn btn-primary">提交</button></div></div></div></div></form> View Code

?

代碼講解[摘錄：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html]：

• 使用模態(tài)窗口，您需要有某種觸發(fā)器。您可以使用按鈕或鏈接。這里我們使用的是按鈕。
• 如果您仔細(xì)查看上面的代碼，您會發(fā)現(xiàn)在 <button> 標(biāo)簽中，data-target="#myModal" 是您想要在頁面上加載的模態(tài)框的目標(biāo)。您可以在頁面上創(chuàng)建多個模態(tài)框，然后為每個模態(tài)框創(chuàng)建不同的觸發(fā)器。現(xiàn)在，很明顯，您不能在同一時間加載多個模塊，但您可以在頁面上創(chuàng)建多個在不同時間進行加載。
• 在模態(tài)框中需要注意兩點：
  • 第一是 .modal，用來把 <div> 的內(nèi)容識別為模態(tài)框。
  • 第二是 .fade class。當(dāng)模態(tài)框被切換時，它會引起內(nèi)容淡入淡出。
• aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標(biāo)題。
• 屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見，直到觸發(fā)器被觸發(fā)為止（比如點擊在相關(guān)的按鈕上）。
• <div class="modal-header">，modal-header 是為模態(tài)窗口的頭部定義樣式的類。
• class="close"，close 是一個 CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。
• data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。
• class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用于為模態(tài)窗口的主體設(shè)置樣式。
• class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用于為模態(tài)窗口的底部設(shè)置樣式。
• data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開模態(tài)窗口。

轉(zhuǎn)載于:https://www.cnblogs.com/professional-NET/p/4787467.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap中过渡效果（Transition）模态框插件的使用案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。