在項目中，前端頁面我們時常需要各種各樣的彈出框：
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 onclick="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"); };
效果：
參考：https://blog.csdn.net/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> 原文鏈接：https://blog.csdn.net/MOONCOM/article/details/55189616