jquery dialog needs to click twice to close

Question

I have been trying to setup a div to popup using jquery dialog

First, when user clicks on the button and opens the dialog then when he close the dialog it closes in the first click.

The second time when he tries to close the dialog it will again open the same popup and he needs to click the close button again to get it closed.

https://jsfiddle.net/xwpwku1w/31/

jQuery:

function ShowMyContainerDivForSC(containerID, title, width, height) {
     if ($(containerID).data('uiDialog'))
         $(containerID).dialog('destroy');
     $(containerID).dialog({
         width: width,
         draggable: true,
         height: height,
         resizable: false,
         title: title,
         modal: false,
         open: function (event, ui) {
             $(this).show();
         },
         close: function (event) {
             if (typeof AfterClose == "function") {
                 AfterClose(containerID);
             }
             //$(this).remove();-- commented cause it just removes the element.
         }
     });
     return false; 
}

Answer 1

Modified your code, var containerID = "#mpopup"; now works as expected for me https://jsfiddle.net/xwpwku1w/33 please check.

side note - would recommend you to save $(containerID) in a variable as it used 3 times, https://jsfiddle.net/xwpwku1w/34