好久沒有發過自己的代碼的狀態了，今天編寫代碼感覺有力不從心了。不過慢慢的找回了感覺，正好朋友問了我一個問題，就是如何實現模態框。其實就是引用bootstrap插件來實現。下面通過本文給大家介紹下。
Bootstrap Modals（模態框）是使用定制的 Jquery 插件創建的。它可以用來創建模態窗口豐富用戶體驗，或者為用戶添加實用功能。您可以在 Modals（模態框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。頁面中的模態框一般分為注冊模態框、變更模態框、刪除（信息提示）模態框三種基本模態框。
好了看代碼。更希望大家互相關注，留下您的寶貴意見
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 實例 - 模態框（Modal）插件</title> <link rel="stylesheet" > <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> h4{ text-align: center; } .c-right{ width:100%; height:130px; border: 1px solid #fff; background-color: #fff; } .foot a{ text-decoration-line: none; } .one { width: 65%; height: 40px; margin-top: 5px; margin-left: 35px; border-radius: 5px; color: #999; line-height: 40px; padding-left: 16px; border: 1px solid #e5e5e5;} .two { width: 65%; height: 40px; margin-top: 5px; border-radius: 5px; margin-left: 35px; color: #999; line-height: 40px; padding-left: 16px; border: 1px solid #e5e5e5;} .login_submit { width: 62%; height: 25px; color: #fff; background: #FB5C5A; border: 0; margin-left: 45px; outline: none; border-radius: 3px;} .footer{ width: 100%； height:80px; border: 1px solid #333333; background-color:#333333; margin-left: 200px; } </style></head><body><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開始</button><!-- 模態框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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"> × </button> <h4 class="modal-title" id="myModalLabel"> 網上輔導管理系統 </h4> </div> <div class="modal-body"> <div id="div2" class="div2 Absolute-Center"> <div class="c-right"> <div class="middle"> <p><input type="text"id="username" class="one"name="username"placeholder="username"></p> <p><input type="password"id="" class="two" name="password"placeholder="password"></p> </div> <div class="foot"> <p> <input type="submit" class="login_submit" id="btn2" value="登入"/> </p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div> </div></div></body></html>以上所述是小編給大家介紹的Bootstrap 模態框實例插件案例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
