關閉jQuery對話框

出於某種原因，我將此代碼顯示爲一個彈出窗口。關閉jQuery對話框

<div id="myDialog" title="myTitle"> 
    <div class="table_cell"> 
    <div class="message"></div> 
    </div> 
    <div class="table_cell" onclick="doMyThing(<?php echo $id; ?>)"> 
    <span style="cursor:pointer">Accept</span> 
    </div> 
</div>

當我火用javascript一些事件，接下來的代碼被執行：

$(document).ready(function() { 
    $('#myDialog').dialog(); 
    $('.message').html("Some text"); 
});

這工作得很好。雖然，我需要點擊我的跨度字段後隱藏/關閉對話框。我試過類似$('#myDialog').dialog('close');但它不起作用。此外，嘗試在'myDialog'display: block時首次點擊，然後display: none，但對話框始終保持在屏幕上。

這'myDialog'實際上是從CSS接收一些樣式，這就是爲什麼我編碼這樣的假對話。有什麼建議麼？

來源

2014-12-19 JuanMiguel

你是如何綁定點擊以觸發關閉事件的？ – atmd

嘗試將'display：none'應用於其父項 –

嗯，我終於用了jQuery按鈕和改變了模樣。我試圖在那裏使用一個CSS類，但它沒有解決。

$(document).ready(function() { 
      $('.message').html("Some text"); 
      $('#myDialog').dialog({ 
       modal: true, 
       buttons: { 
        'accept': { 
         style:'background:#D1040E; color: #DADADA', 
         text: 'Accept', 
         click: function() { 
          doMyThing(<?php echo $id; ?>); 
          $(this).dialog('close'); 
         } 
        }, 
        'cancel': { 
         style:'background:#D1040E; color: #DADADA', 
         text: 'Cancel', 
         click: function() { 
          $(this).dialog('close'); 
         } 
        } 
       } 
      }); 
     });

來源

2014-12-22 17:22:44 JuanMiguel

.dialog('close')應該可以正常工作。正確引用跨度。

<div id="myDialog" title="myTitle"> 
    <div class="table_cell"> 
    <div class="message"></div> 
    </div> 
    <div class="table_cell" onclick="doMyThing(<?php echo $id; ?>)"> 
    <span id='accept' style="cursor:pointer">Accept</span> 
    </div> 
</div> 

$(document).ready(function() { 
    $('#myDialog').dialog(); 
    $('.message').html("Some text"); 
    $('#accept').on('click', function(){ 
     $('#myDialog').dialog('close'); 
    }) 
});

FIDDLE HERE

來源

2014-12-19 12:40:51 Aditya

你可以使用所提供的按鈕，而不是讓自己的

的jQuery：

$(document).ready(function() { 
    $("#mydialog").dialog({ 
     modal: true, 
     buttons: { 
     "Accept": function() { 
       doMyThing(<?= $id ?>); 
       $(this).dialog("close"); 
      } 
     } 
    }) 
});

HTML：

<div id="myDialog" title="myTitle"> 
<div class="table_cell"> 
    <div class="message"></div> 
</div> 
</div>

你可以在這裏查看適當的文件：http://jqueryui.com/dialog/#modal-confirmation

來源

2014-12-19 12:47:16 Pinx0

檢查Link Here

<div id="dialog-confirm" title="Empty the recycle bin?"> 
    <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> 

<script> 
    $(function() { 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     height:140, 
     modal: true, 
     buttons: { 
     "Delete all items": function() { 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 
    </script>

來源

2014-12-19 13:22:49

關閉jQuery對話框

回答

相關問題