写在前面
在实际开发中，为了友好，更需要一种美观的弹出框，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中的内容为字符串就可以了。