jquery ui dialog替代confirm实例分析

jQuery UI Dialog：替代Confirm，完美呈现提示信息

在网页开发中，我们常常需要弹出提示框来与用户进行交互。JavaScript 的 confirm 函数是常用的方法之一，但在某些浏览器中可能会被屏蔽。这时，我们可以考虑使用 jQuery UI 的 dialog 功能来替代 confirm。本文将介绍如何使用 jQuery UI dialog 完美替换 confirm 功能。

一、HTML 结构设置

在 HTML 中添加一个 div 元素，用于显示提示信息。设置其 id 和 title 属性，并初始时设置为隐藏状态（display:none）。

```html

```

二、模拟 confirm 的 JavaScript 代码实现

接下来，我们可以编写一个 JavaScript 函数来模拟 confirm 功能。这个函数接受三个参数：弹层的 ID、提示消息和回调函数。在函数中，我们设置弹层的消息内容，并使用 jQuery UI 的 dialog 方法显示弹层。弹层包含确认和取消两个按钮，点击确认按钮时执行回调函数。

```javascript

var mon = {

confirm_act: function(dialog_id, msg, callback) {

$("" + dialog_id).html("

" + msg + "

$("" + dialog_id).dialog({

resizable: false,

modal: true,

overlay: {

backgroundColor: '000',

opacity: 0.5

},

buttons: {

'确认': function() {

if (typeof callback === 'function') {

callback.call(); // 执行回调函数

}

$(this).dialog('close'); // 关闭弹层

},

'取消': function() {

$(this).dialog('close'); // 关闭弹层

}

}

});

}

};

```

三、回调函数的调用方式及示例

我们可以定义一些函数（如删除操作），并在需要弹出提示框时调用 `mon.confirm_act` 函数，传入相应的参数。注意，回调函数可以使用 `call()` 方法来传递参数或者包含额外的逻辑。如果回调函数中需要访问当前上下文（`this`），需要在回调前重新保存对 `this` 的引用。例如：

```javascript

var remend = {

delete: function(url, obj) { // 定义删除操作函数，接受url和对象作为参数

$.ajax({ // 使用ajax发起请求...省略其他代码...});

}

};

// 在某个事件触发时调用confirm_act函数并传入相应的参数（例如点击事件）

$('.remended_delete').click(function(){

var obj = this; // 保存当前上下文对象

mon.confirm_act('confirm_dialog', $(obj).attr('msg'), function(){ remend.delete($(obj).attr('url'), obj); }); // 显示提示框并执行删除操作

});

``` 如此这般，我们就用 jQuery UI 的 dialog 功能替代了 confirm 功能，可以根据实际需求自定义提示框的内容和操作按钮的行为。这种方式不仅提高了用户体验，还能避免因浏览器对 confirm 的屏蔽导致功能失效的问题。希望本文能对大家在使用 jQuery 进行开发时有所帮助。