本文轉自：http://www.cnblogs.com/JerryWang1991/archive/2011/08/04/2127503.html
今天在改進參加一個全國比賽的項目作品時，發現使用了大量的alert和comfirm，於是自己想實現了彈出一個圖形化的對話框，這樣會變的非常友好，因為時間不多，直接黏貼代碼，分享一下
//當頁面加載完畢時添加一個隱藏的div
$(
function
(){
var
boardDiv =
"<div id='message' style='display:none;'><span id='spanmessage'></span></div>"
;
$(document.body).append(boardDiv);
});
//只是提示信息alert
function
message(text) {
$(
"#spanmessage"
).text(text);
$(
"#message"
).dialog({
title:
"企業信息管理系統，提示您"
,
modal:
true
,
buttons: {
"確定"
:
function
() {
$(
this
).dialog(
"close"
);
}
}
});
}
//類似於confirm的功能
//說明callback是如果要選擇是，要執行的方法
function
queren(text, callback) {
$(
"#spanmessage"
).text(text);
$(
"#message"
).dialog({
title:
"企業信息管理系統，提示您"
,
modal:
true
,
resizable:
false
,
buttons: {
"否"
:
function
() {
$(
this
).dialog(
"close"
);
},
"是"
:
function
() {
callback.call();
//方法回調
$(
this
).dialog(
"close"
);
}
}
});
}
|
使用示例（一個靜態刪除功能的示例）
1、先引用JQuery庫如（ <script src="http://www.cnblogs.com/js/jquery-1.4.2.js" type="text/javascript"></script>）
2、在引用JQuery ui庫
<link href="../css/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet"
type="text/css" />
<script src="../js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
3、寫處理代碼
$(
"a[delete=true]"
).click(function() {
var
id = $(
this
).attr(
"curId"
);
queren(
"確認要刪除嗎？"
, function() {
$.post(
"productDel.ashx"
, {
"action"
:
"delete"
,
"id"
: id }, function(data, status) {
if
(data ==
"ok"
) {
message(
"刪除成功！"
);
$(
"a[curId='"
+ id +
"']"
).parent().parent().parent().parent().remove();
}
});
});
});
|
看看效果怎么樣（還沒有做美工）
----轉載請注明出處http://www.cnblogs.com/JerryWang1991/ 謝謝！