使用bootstrap可以实现比较美观的对话框,使用时需要先引入jquery文件和bootstrap文件。
<link rel="stylesheet" type="text/css" href="../common/css/bootstrap.css" /> <script type="text/javascript" src="../common/js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../common/js/bootstrap.min.js"></script>
添加以下代码
1 <div class="modal fade" id="message_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabe"> 2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 6 <span aria-hidden="true">×</span> 7 </button> 8 <h4 class="modal-title" id="output_info_title"></h4> 9 </div> 10 <div class="modal-body"> 11 <div class="form-group"> 12 <label id="output_info"></label> 13 </div> 14 </div> 15 <div class="modal-footer"> 16 <button type="button" class="btn btn-default" data-dismiss="modal"> 17 <span aria-hidden="true"></span>关 闭 18 </button> 19 </div> 20 </div> 21 </div> 22 </div>
在js页面中为对话框的标题和内容赋值,并且使用modal()方法来显示对话框。
1 $("#zj_search").click(function(){ 2 $("#output_info_title").text("提示!"); 3 $("#output_info").text("查询无数据!请确认后再查询!"); 4 $("#message_dialog").modal(); 5 });
显示效果: