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將在點擊取消時自動顯示它。