寫在前面
在實際開發中，為了友好，更需要一種美觀的彈出框，js原生的alert，很難滿足需求。這里推薦一個bootstrap的彈出框。
一個例子
先看效果吧
代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模式彈出框</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <link href="Css/bootstrap.min.css" rel="stylesheet" /> <script src="JS/jquery.js"></script> <script src="JS/bootstrap.min.js"></script> <script> </script> <style> .blue { background-color: #0094ff; } .text-center { text-align: center; } </style> </head> <body> <input type="button" data-target="#loginModal" data-toggle="modal" name="name" class="form-control bt-red" value="登錄" /> <!-- modal --> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header blue"> 登錄 </div> <div class="modal-body"> <input type="text" class="form-control" placeholder="請輸入用戶名" name="name" /> <input type="password" class="form-control" placeholder="請輸入密碼" value="新建文件夾" name="name" /> </div> <div class="modal-footer"> <div class="form-control text-center">登錄</div> <div class="form-control text-center" data-dismiss="modal"><div class="button"></div>取消</div> </div> </div> </div> </div> </body> </html>
注意
data-target屬性，指向了model的id，所以點擊按鈕，model就會彈出來了。
用js也可以來控制
<script> $("#btnLogin").click(function () { //顯示 $("#loginModal").modal("show"); //隱藏 $('#loginModal').modal('hide'); //切換 $('#myModal').modal('toogle'); }); </script>
總結
之所以推薦這個彈出框，是因為這個操作更方便，因為在項目中用到bootstrap，這樣也不需要再去添加其他的引用了。如果用來作為提示框，可以修改modal-body中的內容為字符串就可以了。