在項目的頁面中，由於需要經常與用戶進行交互。在提交頁面的表單的時，如果用戶名（文本框）為空，則通過提示框提示用戶輸入的內容；如果刪除記錄，同樣也需要確認是否刪除。如果直接通過JavaScript語言中的alert（）方法和confirm（）方法實現，不僅不能達到預期的效果，代碼還比較復雜，因此我將通過jQuery UI插件的對話框來進行實現。詳細介紹如下：
初始時的效果：
包含用戶輸入框和刪除按鈕的頁面：
HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script> <!--<script type="text/javascript" src="js/jquery-ui.js" ></script>--> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> </head> <body> <div class="demo"> <div style="background-color:#eee;padding:5px;width:260px"> 請輸入用戶：<br /> <input id="txtName" type="text" class="txt"/> <input id="btnSubmit" type="submit" value="提交" class='btn'/ > </div> <div style="padding: 5px; width: 260px;"> <span id="spanName">hello</span> <input id="btnDelete" type="button" value="刪除" class="btn"/> </div> <div id="dialog"></div> </div> </body> </html>
實現彈出和確定信息對話框功能：
彈出提示信息對話框功能：
刪除確認消息對話框：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>對話框的實現</title> <link href="js/jquery-ui.css" rel="stylesheet"> <style type="text/css"> body { font-size: 62.5%; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; } table { font-size: 1em; } .demo-description { clear: both; padding: 12px; font-size: 1.3em; line-height: 1.4em; } .ui-draggable, .ui-droppable { background-position: top; } div{line-height:1.8em} .txt{border:#666 1px solid;padding:2px;width:180px;margin-right:3px} button,.btn {border:#666 1px solid;padding:2px;width:60px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style> <script src="js/jquery-3.2.1.js"></script> <script src="js/jquery-ui.js"></script> <script> $(function() { $("#btnSubmit").on("click", function() { //檢測按鈕事件 if ($("#txtName").val() == "") { //如果文本框為空 sys_Alert("姓名不能為空！請輸入姓名"); } }); $("#btnDelete").on("click", function() { //詢問按鈕事件 if ($("#spnName").html() !=null) { //如果對象不為空 sys_Confirm("您真的要刪除該條記錄嗎？"); return false; } }); }); function sys_Alert(content) { //彈出提示信息窗口 $("#dialog-modal").dialog({ height: 140, modal: true, title: '系統提示', hide: 'slide', buttons: { Cancel: function() { $(this).dialog("close"); } }, open: function(event, ui) { $(this).html(""); $(this).append("<p>" + content + "</p>"); } }); } function sys_Confirm(content) { //彈出詢問信息窗口 $("#dialog-modal").dialog({ height: 140, modal: true, title: '系統提示', hide: 'slide', buttons: { '確定': function() { $("#spnName").remove(); $(this).dialog("close"); }, '取消': function() { $(this).dialog("close"); } }, open: function(event, ui) { $(this).html(""); $(this).append("<p>" + content + "</p>"); } }); } </script> </head> <body> <div class="demo-description"> <div style="background-color:#eee;padding:5px;width:260px"> <input id="txtName" type="text" class="txt" /> <input id="btnSubmit" type="button" value="提交" class="btn" /> </div> <div style="padding:5px;width:260px"> <span id="spnName">hello</span> <input id="btnDelete" type="button" value="刪除" class="btn" /> </div> <div id='dialog-modal'></div> </div> </body> </html>
在自定義方法sys_Alert()中，通過dialog方法實現彈出提示信息對話框，而在自定義方法sys_Confirm()中，通過dialog方法實現彈出確認信息對話框。