我正在尝试创建多个对话框，有些原因是我无法理解如何创建这些对话框。

我为每个对话框都设置了DIV's，其中每个操作都有一条消息。基本上，如果用户检查CheckBox，则会出现对话框，说明您要确认此操作。一段时间后，如果用户再次取消选中CheckBox，则会出现另一个对话框，其中包含diff消息。请帮我拿这个。

这是我目前为止得到的。

================

HTML

<div id="dialog-isReceived" title="Mark as Received?">
    Are you sure you want to mark this order as "Received"? <br />
    The customer will receive an email confirming their order is ready for collection.
</div>
<div id="dialog-notReceived" title="Mark as Not Received?">
    Are you sure you want to mark this order as "Not Received"? <br />
</div>

---

Jquery

var isReceivedCheckBox = $('.isReceivedCheckBox input[type=checkbox]');
var dialogId; //trying to pass the Id of the div dynamically BUT not working 
var result;
$(document).ready(function () {
$(dialogId).dialog(
  {
        autoOpen: false,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
              "Confirm": function () {
                    result = true;
              },
              Cancel: function () {
                    result = false;
                    $(this).dialog("close");
              }
        },
  });
});

=====================

我要执行的代码

$(document).on("change",isReceivedCheckBox, function () {
var checked = $(this).is(':checked');
if (checked) {
  dialogId = "'#dialog-isReceived'"; //setting the DIV ID here and hoping that dialog will appears.
  $(dialogId).dialog('open');
  if(!result)
        $(this).attr("checked", false); // if user clicks cancel on dialog then do not check the checkbox
} else {
    dialogId = "'#dialog-notReceived'";
    $(dialogId).dialog('open');
  if(!result)
        $(this).attr("checked", true); //if user clicks cancel on dialog then do not uncheck the checkbox because it was checked previously
}
});

这里的问题是对话框永远不会出现，因为当页面加载时，我的所有div都是可见的，因为我无法在页面加载时设置dialogID变量。此外，我在这个页面上至少有5个对话框做同样的功能。如果你能提出更好的方法，或者告诉我我在这里做错了什么，我将不胜感激。

谢谢，米兰P

if(!result)

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();
    $(dialog).dialog({
        autoOpen: true,
        width: 300,
        height: 200,
        resizable: false,
        modal: false,
        buttons: {
            'Confirm': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: function () {
            if (def.state() === "pending") {
                def.reject(); // Make sure unanswered dialog rejects
            }
            $( this ).remove();
        }
    });
    return def.promise();
}

confirmDialog("are your sure?").done(function() {
    // He/She said yes
}).fail(function() {
    // He/She said no
});