Problems with appear confirm window when closing dialog?

Question

When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog I have Tow buttons (Save) and (Cancel). When I press Cancel buttons a confirm window pop-ups.

I want when I press the close in the right corner, that confirm window pop-ups. I tried by this part of code to fix it, but not succeeded:

close: function () {
                $('#dialog-confirm').dialog({
                    resizable: false,
                    height: 300,
                    modal: true,
                    draggable: false,
                    buttons: {
                        YES: function () {
                            $(this).dialog("close");
                            $('#modalDialog').dialog("close");
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            } 

The issue is when I'm doing it in that way, the dialog window first close, then the confirm window pop-up. I don't want that, but I want the opposite.

JQuery:

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div'); 
    $('<label>Title</label><br/>').appendTo($div);              
    $('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
    $('<input/>', { "type": "text","class":"date"}).appendTo($div);
    var cnt =0,$currentTarget;
    $('#AddCardBtn').click(function () {
      var $newDiv = $div.clone(true);
      cnt++;  
      $newDiv.prop("id","div"+cnt);  
      $('#userAddedCard').append($newDiv);
//      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center',
            buttons: {
                Save: function () { //submit

                    var val = $("#customTextBox").val();
                    $currentTarget.find(".ctb").val(val);
                    $currentTarget.find(".date").val($("#datepicker").val());
                    $('#modalDialog').dialog("close");

                },
                Cancel: function () { //cancel

                $('#dialog-confirm').dialog({
                resizable: false,
                height: 300,
                modal: true,
                draggable: false,
                buttons: {
                    YES: function () {
                        $(this).dialog("close");
                        $('#modalDialog').dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });

                }

            },
            close: function () {
                $('#dialog-confirm').dialog({
                    resizable: false,
                    height: 300,
                    modal: true,
                    draggable: false,
                    buttons: {
                        YES: function () {
                            $(this).dialog("close");
                            $('#modalDialog').dialog("close");
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            }
        });

    });

    $("#datepicker").datepicker({showWeek:true, firstDay:1});


});

Maybe I'm wrong, in that way I'm doing. Any idea how to fix it?

Live Demo

Answer 1

You may try use the beforeClose for the confirm window, and if confirmed then close the dialog.