一步步開發自己的博客 .NET版（10、前端對話框和消息框的實現）

本文轉載自查看原文 2016-07-11 08:37 3943 個人博客/ .NET博客/ Hi-Blogs/ js/ 學習區2.1【JavaScript】/ 學習區6.1【小玩意、小作品】

關於前端對話框、消息框的優秀插件多不勝數。造輪子是為了更好的使用輪子，並不是說自己造的輪子肯定好。所以，這個博客系統基本上都是自己實現的，包括日志記錄、響應式布局、評論功能等等一些本可以使用插件的。好了，廢話不多時。我們來實現自己的對話框和消息框。

對話框

要求：可拖動、點擊按鈕后可回調

畫一個簡單的模型框

<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);
            });
        });

如果使用jquery.min.js，拖動一句代碼搞定： $("div.hi-dialog-title").draggable();

以上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;
15         }
16 
17         .clearfix {
18             *zoom: 1;
19         }
20 
21         div.hi-message-box {
22             padding: 10px;
23             padding-top: 15px;
24             padding-bottom: 20px;
25             background-color: #aee0c1;
26             position: absolute;
27             min-width: 200px;
28             max-width: 500px;
29             font-size: 19px;
30             border-radius: 3px;
31             top:200px;
32             left:45%;
33         }
34 
35             div.hi-message-box img {
36                 vertical-align: bottom;
37             }
38     </style>
39 </head>
40 <body>
41     <input type="button" onclick="success();" value="成功消息" />
42     <input type="button" onclick="error();" value="失敗消息" />
43     <input type="button" onclick="warn();" value="警告消息" />
44     <script src="../../Scripts/jquery-1.8.2.js"></script>
45     <script type="text/javascript">
46         var hiMessageBox = {
47             init: function (type, messg) {
48                 var hiMessageBox = '<div class="hi-message-box">\
49                                     <img class="hi-message-type" src="" />\
50                                     <span class="hi-message-messg"></span>\
51                                 </div>';
52 
53 
54                 if (!$("div.hi-message-box").length) {
55                     $("body").append(hiMessageBox);
56                 }
57                 var $box = $("div.hi-message-box");
58                 $box.find(".hi-message-messg").text(messg);
59                 switch (type) {
60                     case 0://success 成功
61                         $box.find("img.hi-message-type").attr("src", "imgs/Tick_24px.png")
62                         break;
63                     case 1://warn 警告
64                         $box.find("img.hi-message-type").attr("src", "imgs/Warning_24px.png")
65                         break;
66                     case 2://
67                         $box.find("img.hi-message-type").attr("src", "imgs/Delete_24px.png")
68                         break;
69                 }
70                 $("div.hi-message-box").fadeIn("slow")
71                 setTimeout(function () {
72                     $("div.hi-message-box").fadeOut("slow");
73                 }, 1200);
74             },
75             success: function (messg) {
76                 this.init(0, messg); 
77             },
78             warn: function (messg) {
79                 this.init(1, messg);
80             },
81             error: function (messg) {
82                 this.init(2, messg);
83             }
84         };      
85     </script>
86     <script type="text/javascript">
87         function success() {
88             hiMessageBox.success("成功");
89         }
90         function error() {
91             hiMessageBox.error("失敗");
92         }
93         function warn() {
94             hiMessageBox.warn("警告");
95         }
96     </script>
97 </body>
98 </html>

View Code

演示地址：對話框演示地址消息框演示地址

《一步步搭建自己的博客》

關於簡單實現自己的對話框和消息框就到這里了。感謝您的閱讀，希望對您有一點點作用。

文章首鏈：http://www.cnblogs.com/zhaopei/p/MessageBox_DialogBox.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。