<!DOCTYPE html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title></title>
<style type=
"text/css"
>
* {
box-sizing: border-box;
}
.clearfix:after {
content:
' '
;
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
div.hi-dialog-box {
border: 1px
#808080 solid;
width: 350px;
height: 200px;
position: absolute;
top: 200px;
left: 40%;
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;
overflow: auto;
}
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;
}
</style>
</head>
<body>
<input value=
"對話框（肯定）"
onclick=
"click1();"
type=
"button"
/>
<input value=
"對話框（肯定、取消）"
onclick=
"click2();"
type=
"button"
/>
<div class=
"messg"
style=
"margin: 10px; color: red; font-size: 23px"
></div>
<script src=
"../../Scripts/jquery-1.8.2.js"
></script>
<script type=
"text/javascript"
>
var
hiDialog = {
init:
function
(title, messg, determineCallback, cancelCallback) {
title = title ||
"系統提示"
;
var
determine =
""
, cancel =
""
;
if
(
typeof
(determineCallback) ==
"function"
)
determine =
'<input type="button" class="hi-dialog-determine" value="肯定" />'
;
if
(
typeof
(cancelCallback) ==
"function"
)
cancel =
'<input type="button" class="hi-dialog-cancel" value="取消" />'
;
if
(!$(
"div.hi-dialog-box"
).length) {
var
hi_dialog_box =
'<div class="hi-dialog-box clearfix">\
<div class="hi-dialog-title"></div>\
<div class="hi-dialog-content">\
</div>\
<div class="hi-dialog-foot">\
</div>\
</div>'
;
$(
"body"
).append(hi_dialog_box);
}
var
$box = $(
"div.hi-dialog-box"
);
$box.find(
"div.hi-dialog-title"
).html(title);
$box.find(
"div.hi-dialog-content"
).html(messg);
$box.find(
"div.hi-dialog-foot"
).html(determine + cancel);
$(
"div.hi-dialog-box"
).show();
$box.find(
".hi-dialog-determine"
).click(
function
() {
determineCallback();
hiDialog.close();
});
$box.find(
".hi-dialog-cancel"
).click(
function
() {
cancelCallback();
hiDialog.close();
});
//鼠標按下時
$(
"div.hi-dialog-title"
).mousedown(
function
(event) {
$(
"html"
).unbind();
var
click_clientX = event.clientX;
var
click_clientY = event.clientY;
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);
});
});
},
close:
function
() {
$(
"div.hi-dialog-box"
).hide();
}
}
</script>
<script type=
"text/javascript"
>
function
click1() {
hiDialog.init(
"系統提示！"
,
"測試"
,
function
() {
//點擊肯定後的回調執行
$(
".messg"
).text(
"點擊了肯定"
);
});
}
function
click2() {
hiDialog.init(
"系統對話框~~"
,
"什麼亂七八糟的啊..."
,
function
() {
$(
".messg"
).text(
"點擊了肯定~~~"
);
},
function
() {
$(
".messg"
).text(
"點擊了取消~~"
);
});
}
</script>
</body>
</html>
|
消息框
要求：自動定時關閉消息框、有消息分類（如：警告、錯誤、成功等）
畫一個簡單的模型框
|
1
2
3
4
|
<div class=
"hi-message-box"
>
<img class=
"hi-message-type"
src=
""
/>
<span class=
"hi-message-messg"
>你不愛我了~~</span>
</div>
|
添上基本樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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);
效果圖：
加上消息類型（其實就是根據參數加不一樣的圖片而已）
|
1
2
3
|
setTimeout(
function
() {
$(
"div.hi-message-box"
).fadeOut(
"slow"
);
}, 1200);
|
效果圖：
加上圖標是否是更像那麼回事了？
如上，咱們一樣須要稍微整理下實現代碼：
效果圖：
所有代碼：（一樣，消息框也只是進行了簡單實現。還有太多沒有考慮，如（參數定位消息框位置、設置定時關閉時間、屢次觸發消息框））
|
1
2
3
4
5
|