在项目中，前端页面我们时常需要各种各样的弹出框：
1、alert对话框：显示含有给定消息的"JavaScript Alert"对话框
代码：
var a = "HelloWorld";alert("对话框内容：" + a);
效果：
2、confirm对话框：显示含有给定消息的"Confirm"对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false
代码：
var a = "是否提交？";var result = confirm("提示：" + a);alert("返回结果：" + result);
效果：
3、prompt对话框：显示一个"prompt"对话框,要求用户根据显示消息给予相应输入
//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值var name=prompt("请输入您的名字",""); if(name !="" && name != null){alert("欢迎你，" + name);}
效果：
4、open：打开一个新窗口,给予一个指定的名字
代码：
//open("URL","name")open("promptBox.jsp","promptBox");
5、close：关闭当前窗口
代码：
close() ;
6、使用div和Jquery来展示：可以像模态框一样
注意：需要引入Jquery的相关库，本人引入的分别为：
<script src="PublicFile/Jquery/jquery-1.7.1.js"></script>
<script src="PublicFile/Jquery/jquery-ui.js"></script>
<link href="PublicFile/Jquery/jquery-ui.css" media="screen" rel="stylesheet" type="text/css"></link>
代码：
//jsp页面：<div id="my_dialog" title="新建文件" style="display: none"><form><p>文件名：<input type="text" id="fileName" /></p><p>类 型：<select id="fileType"><option value="txt">TXT</option><option value="doc">World</option><option value="pdf">PPT</option><option value="xls">Excel</option></select></p><p>备 注：<input type="text" id="Remarks" /></p><div style="float: right;"><button class="my-btn-gray" OnClick="Cancel()">取消</button><button class="my-btn-blue" OnClick="confirm()">确认</button></div></form></div><div><button οnclick="NewFile();">点击me</button></div>//js中方法//显示新建文件提示页function NewFile() {$('#my_dialog').dialog({modal : true,width : "400",height : "230"});document.getElementById("my_dialog").style.display = "block";};//新建文件确认function confirm() {$('#my_dialog').dialog("close");var fileName = document.getElementById("fileName").value; //文件名var fileType = document.getElementById("fileType").value; //文件类型var Remarks = document.getElementById("Remarks").value; //备注alert("fileName:" + fileName + " fileType:" + fileType + " Remarks:" + Remarks);};//新建文件取消function Cancel() {$("#fileName").val("");$("#Remarks").val("");$("#fileType").empty();var ops = {"txt" : "TXT","doc" : "World","pdf" : "PPT","xls" : "Excel"};var parent = document.getElementById("fileType");for ( var key in ops) {var o = new Option(ops[key], key);parent.appendChild(o);}sessionStorage.setItem("orderMergeStr", '');$('#my_dialog').dialog("close");};
效果：
参考：/diyinqian/article/details/83691464
注意：jquery ui dialog 右上角怎么没有显示关闭按钮
需要关闭按钮相关的图片，并且放入到对应的路径才行，具体如下：
需要在jQuery.ui.css同级目录下，建立images文件夹并且把jQuery中的图片放入进去即可。
7、使用Jquery中的fancyBox来显示
注意：需要引入Jquery的相关库，本人引入的分别为：
<script src="PublicFile/Jquery/jquery-1.7.1.js"></script>
<script src="PublicFile/Jquery/jquery.fancybox-1.3.4.pack.js"></script>
<script src="PublicFile/Jquery/jquery.fancybox-1.3.4.js"></script>
<link href="PublicFile/Jquery/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css"></link>
代码：
//index.jsp<div><button id="fancybox" >点击me</button></div>//js$(document).ready(function() {$("#fancybox").fancybox({'href' : 'promptBox.jsp',//此处为显示页面URL'width' : 900,'height' : 600,'type' : 'iframe','hideOnOverlayClick' : false,'showCloseButton' : false,'onClosed' : function() {window.location.href = 'index.jsp';}});});//promptBox.jsp<p>你好,这是fancyBox显示的页面，里面可以实现很多功能哦，表单提交、信息展示、提示框等等。。。</p><a href="javascript:parent.$.fancybox.close();">点击me，关闭此页面</a>
效果：
8、dialog使用
<!-- 基础类库 --><SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT><!-- 布局的基本类库(不涉及到布局不需要)--><SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT><!-- ui的样式表 --><link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" /><!-- ui的类库 --> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script><SCRIPT type="text/javascript">$(document).ready(function () {//制定某个div的id 将其作为 Dialog $('#helpdialog').dialog({//是否创建就打开对话框，也就是是否页面一打开就显示对话框autoOpen: false,/*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug就是在IE6下 div无法覆盖<select></select> 是否使用那该属性解决*/bgiframe:true,//设置对话框宽度width: 600,//设置对话框高度height: 260,/*设置对话框底部的按钮*/buttons: {"确定": function() {//单击按钮后的回调函数，就是按钮被单击后的响应事件 $(this).dialog("close"); }/*"取消": function() { $(this).dialog("close"); }*/},/*是否为对话框添加ESC快捷键*///closeOnEscape: false,//对话框是否可以被拖动draggable:false,//打开对话框时是否使用特效show:"slide",//关闭对话框时是否使用特效动画hide: "slide",//是否可以调整对话框的大小resizable:false,//调整对话框的高度和宽度极限值(当resizable:true时)//maxHeight:520//maxWidth:620//minHeight:320//minWidth:220//是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作modal:true,//是否可覆盖其它对话框//stack:false//对话框标题(也可以再div的title上进行设置)title:"请登陆"//设置对话框 CSS z-index 值//zIndex:50});// 对话框的打开连接$('#helpdialog_link').click(function(){$('#helpdialog').dialog('open');return false;});});</SCRIPT><BODY> <a href="#" id="dialog_link">从此处打开对话框</a></span><div id="helpdialog" title="对话框的标题"><p>对话框的内容</p></div></BODY>原文链接：/MOONCOM/article/details/55189616
