ins的问题

Question

我有一个对话窗口。单击取消时，我想弹出一个确认对话框。我这样做的方法是创建一个div元素。在div元素中我有一些文本，我想在确认对话框中显示。问题是，应该在确认窗口中显示的文本将显示在模态窗口中。如下图所示：我该如何避免这个问题？

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

将以下内容添加到CSS中：

#dialog-confirm
{
   display:none;   
}

点击取消后，jQuery会自动显示它。