Problems with ins

Question

I have a dialog window. I want to pop-up a confirm dialog, when clicking Cancel. The way I am doing this is to create a div element. In the div element I have some text, I want to display in the confirm dialog. The problem is, that the text that should be displaying in the confirm window, is instead displaying in the modal window. Like in the image below: How can I avoid this issue??

Demo

HTML:

<div>
<form>
        <label>Title</label>
        <input type="text" id="customTextBox" value="some value"/>
        <p>Date: <input type="text" id="datepicker" value="some date"/></p> 
        <input type="button" id="Getbtn" value="Get value"/> <hr/><br/>

        <div id="dialog-confirm" title="Close the dialog">
        <p><span class="ui-icon ui-icon-alert"             
        style="float:left; margin:0 7px 20px 0;">                
        </span>These items will be permanently deleted and cannot be recovered. 
               Are you sure?</p>
        </div>
    </form>
</div>

JQuery:

$(function () {

        $('#modalDialog').dialog({
            modal: true,
            height: 450,
            width: 350,
            position: 'center',
            buttons: {
                Save: function() { //submit
                    $( this ).dialog( "close" );
                },
                Cancel: function () { //cancel

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

        });
        return false;

Answer 1

By adding the following to your CSS:

#dialog-confirm
{
   display:none;   
}

jQuery will then automatically show it when clicking Cancel.