本文轉自：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/ 謝謝！

?

總結

以上是生活随笔為你收集整理的[转]JQuery ui 实现类似于confirm的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。