關於前端對話框、消息框的優秀插件多不勝數。造輪子是為了更好的使用輪子，並不是說自己造的輪子肯定好。所以，這個博客系統基本上都是自己實現的，包括日誌記錄、響應式佈局等等一些本可以使用插件的。好了，廢話不多時。我們來實現自己的對話框和消息框。 ...
關於前端對話框、消息框的優秀插件多不勝數。造輪子是為了更好的使用輪子，並不是說自己造的輪子肯定好。所以，這個博客系統基本上都是自己實現的，包括日誌記錄、響應式佈局等等一些本可以使用插件的。好了，廢話不多時。我們來實現自己的對話框和消息框。
對話框
要求：可拖動、點擊按鈕後可回調
- 畫一個簡單的模型框
<div class="hi-dialog-box clearfix"> <div class="hi-dialog-title">系統提示</div> <div class="hi-dialog-content"> </div> <div class="hi-dialog-foot"> <input type="button" class="hi-dialog-determine" value="確定" /> <input type="button" class="hi-dialog-cancel" value="取消" /> </div> </div>
- 添上基本的樣式
div.hi-dialog-box { border: 1px #808080 solid; width: 350px; height: 200px; border-radius: 3px; } div.hi-dialog-box div.hi-dialog-title { border: 1px #808080 solid; margin: 1px; padding: 1px; background-color: #dedcdc; height: 14%; cursor: move; font-size: 20px; } div.hi-dialog-box div.hi-dialog-content { height: 65%; margin: 5px; } div.hi-dialog-box div.hi-dialog-foot { margin: 1px; padding: 1px; height: 14%; } div.hi-dialog-box div.hi-dialog-foot input { float: right; margin-left: 5px; font-size: 16px; }View Code
效果圖：
是不是像那麼回事了，不過現在還不能拖動。拖動，說白了就是在滑鼠移動的時候不停的修改絕對定位。
首先修改以下樣式：
用js代碼實現拖動效果：
//滑鼠按下時 $("div.hi-dialog-title").mousedown(function (event) { $("html").unbind();//首先清除事件方法 var click_clientX = event.clientX;//記錄滑鼠按下時相對當前視窗的 x 坐標 var click_clientY = event.clientY;//記錄滑鼠按下時相對當前視窗的 y 坐標 //取的對話框容器 var dialogBox = $(this).closest("div.hi-dialog-box"); //記錄對話框容器當前位置 var dialogBoxX = parseInt($(dialogBox).css("left")); var dialogBoxY = parseInt($(dialogBox).css("top")); //滑鼠移動時 $("html").mousemove(dialog_mousemove = function (event) { //滑鼠按下後移動量加上原來的位置 var top = event.clientY - click_clientY + dialogBoxY; var left = event.clientX - click_clientX + dialogBoxX; //修改對話框位置（這裡就實現了移動效果了） $(dialogBox).css({ "left": left, "top": top }); }); //滑鼠按鍵鬆開時 $("html").mouseup(function () { //清除滑鼠移動事件 $("html").unbind("mousemove", dialog_mousemove); }); });
以上js代碼就實現了對話框的拖動效果。首先，只有當滑鼠在對話框標題區域按下滑鼠才可以拖動，然後滑鼠移動的的時候實時計算和改變容器的位置，最後如果滑鼠按鍵鬆開這清除滑鼠移動事件。
- 點擊按鈕後可回調
很多時候，我們點擊確定或取消的時候我們需要執行回調（比如“您是否刪除”，點擊了確定後肯定需要做刪除操作）。
如此，我們點擊確定的時候會自動關閉對話框並可以執行自己需要執行的一些操作。可以，有同學會說，你這算什麼狗屁對話框啊，html代碼全都需要直接編碼。是的，這隻是簡單的說下思路，下麵我們來簡單整理下。
效果圖：
全部代碼：（當然，這隻是簡單實現。還有很多需要繼續細化的效果，如：背景遮罩、如果實現點擊多次對話框）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 * { 8 box-sizing: border-box; 9 } 10 11 .clearfix:after { 12 content: ' '; 13 display: table; 14 clear: both; 15 } 16 17 .clearfix { 18 *zoom: 1; 19 } 20 21 div.hi-dialog-box { 22 border: 1px #808080 solid; 23 width: 350px; 24 height: 200px; 25 position: absolute; 26 top: 200px; 27 left: 40%; 28 border-radius: 3px; 29 } 30 31 div.hi-dialog-box div.hi-dialog-title { 32 border: 1px #808080 solid; 33 margin: 1px; 34 padding: 1px; 35 background-color: #dedcdc; 36 height: 14%; 37 cursor: move; 38 font-size: 20px; 39 } 40 41 div.hi-dialog-box div.hi-dialog-content { 42 height: 65%; 43 margin: 5px; 44 overflow: auto; 45 } 46 47 div.hi-dialog-box div.hi-dialog-foot { 48 margin: 1px; 49 padding: 1px; 50 height: 14%; 51 } 52 53 div.hi-dialog-box div.hi-dialog-foot input { 54 float: right; 55 margin-left: 5px; 56 font-size: 16px; 57 } 58 </style> 59 </head> 60 <body> 61 <input value="對話框（確定）" onclick="click1();" type="button" /> 62 <input value="對話框（確定、取消）" onclick="click2();" type="button" /> 63 <div class="messg" style="margin: 10px; color: red; font-size: 23px"></div> 64 65 <script src="../../Scripts/jquery-1.8.2.js"></script> 66 <script type="text/javascript"> 67 var hiDialog = { 68 init: function (title, messg, determineCallback, cancelCallback) { 69 70 title = title || "系統提示"; 71 var determine = "", cancel = ""; 72 if (typeof (determineCallback) == "function") 73 determine = '<input type="button" class="hi-dialog-determine" value="確定" />'; 74 if (typeof (cancelCallback) == "function") 75 cancel = '<input type="button" class="hi-dialog-cancel" value="取消" />'; 76 77 if (!$("div.hi-dialog-box").length) { 78 var hi_dialog_box = '<div class="hi-dialog-box clearfix">\ 79 <div class="hi-dialog-title"></div>\ 80 <div class="hi-dialog-content">\ 81 </div>\ 82 <div class="hi-dialog-foot">\ 83 </div>\ 84 </div>'; 85 $("body").append(hi_dialog_box); 86 } 87 88 var $box = $("div.hi-dialog-box"); 89 $box.find("div.hi-dialog-title").html(title); 90 $box.find("div.hi-dialog-content").html(messg); 91 $box.find("div.hi-dialog-foot").html(determine + cancel); 92 $("div.hi-dialog-box").show(); 93 94 $box.find(".hi-dialog-determine").click(function () { 95 determineCallback(); 96 hiDialog.close(); 97 }); 98 $box.find(".hi-dialog-cancel").click(function () { 99 cancelCallback(); 100 hiDialog.close(); 101 }); 102 103 //滑鼠按下時 104 $("div.hi-dialog-title").mousedown(function (event) { 105 $("html").unbind(); 106 var click_clientX = event.clientX; 107 var click_clientY = event.clientY; 108 var dialogBox = $(this).closest("div.hi-dialog-box"); 109 var dialogBoxX = parseInt($(dialogBox).css("left")); 110 var dialogBoxY = parseInt($(dialogBox).css("top")); 111 //滑鼠移動時 112 $("html").mousemove(dialog_mousemove = function (event) { 113 var top = event.clientY - click_clientY + dialogBoxY; 114 var left = event.clientX - click_clientX + dialogBoxX; 115 $(dialogBox).css({ "left": left, "top": top }); 116 }); 117 //滑鼠按鍵鬆開時 118 $("html").mouseup(function () { 119 $("html").unbind("mousemove", dialog_mousemove); 120 }); 121 }); 122 }, 123 close: function () { 124 $("div.hi-dialog-box").hide(); 125 } 126 } 127 </script> 128 <script type="text/javascript"> 129 function click1() { 130 hiDialog.init("系統提示！", "測試", function () { 131 //點擊確定後的回調執行 132 $(".messg").text("點擊了確定"); 133 }); 134 } 135 136 function click2() { 137 hiDialog.init("系統對話框~~", "什麼亂七八糟的啊...", function () { 138 $(".messg").text("點擊了確定~~~"); 139 }, function () { 140 $(".messg").text("點擊了取消~~"); 141 }); 142 } 143 </script> 144 </body> 145 </html>View Code
消息框
要求：自動定時關閉消息框、有消息分類（如：警告、錯誤、成功等）
- 畫一個簡單的模型框
<div class="hi-message-box"> <img class="hi-message-type" src="" /> <span class="hi-message-messg">你不愛我了~~</span> </div>
- 添上基本樣式
<style type="text/css"> div.hi-message-box { padding: 10px; padding-top: 15px; padding-bottom: 20px; background-color: #aee0c1; min-width: 200px; max-width: 500px; font-size: 19px; border-radius: 3px; } </style>
效果圖：
看上去是不是很簡單呢？下麵我們給它加上定時關閉消息功能。
- 定時關閉消息（表罵我，就是這麼簡單。我也想寫複雜的。）
setTimeout(function () {
$("div.hi-message-box").fadeOut("slow");
}, 1200);
效果圖：
- 加上消息類型（其實就是根據參數加不同的圖片而已）
setTimeout(function () { $("div.hi-message-box").fadeOut("slow"); }, 1200); var $box = $("div.hi-message-box"); $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
效果圖：
加上圖標是不是更像那麼回事了？
如上，我們同樣需要稍微整理下實現代碼：
效果圖：
全部代碼：（同樣，消息框也只是進行了簡單實現。還有太多沒有考慮，如（參數定位消息框位置、設置定時關閉時間、多次觸發消息框））
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 * { 8 box-sizing: border-box; 9 } 10 11 .clearfix:after { 12 content: ' '; 13 display: table; 14 clear: both
