jQuery UI對話框顯示不正確

我在開發的站點中使用jQuery UI 1.8.19和Twitter Bootstrap 2.0.3。我想顯示一個模式對話框時，點擊在刪除，爲此我做：jQuery UI對話框顯示不正確

<div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>"> 
     <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p> 
</div>

而且JS觸發事件是這一個：

$(function() { 
    $("#delete").click(function(){ 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      buttons: { 
       "<?php echo lang('event:delete') ?>": function() { 
        $(this).dialog("close"); 
       }, 
       "<?php echo lang('global:cancel_label') ?>": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 
});

出於某種原因，模態對話框總是顯示在頁面的末尾，當它不應該是我認爲，當我點擊元素對話框出現，但頁面瞬間重定向到我的主頁，並不知道原因，因爲我沒有重定向在任何地方，也沒有任何形式。對此有何建議或幫助？致以問候

來源

2012-04-25 ReynierPM

任何機會，你可以發佈一個鏈接呢？我可以prolly幫助特魯布爾拍攝這很快，如果你有它在網上 – SpYk3HH 2012-04-25 12:38:05

您應該添加style='display: none'到您的對話框的div，所以它不會在啓動時顯示。

然後，如果頁面發送到家裏，當你點擊按鈕，你可能想要檢查什麼類型的按鈕#delete是，並完成它的功能return false如果它是一個提交例如，以避免正常的點擊事件處理程序是推出：

$(function() { 
    $("#delete").click(function(e){ 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height:140, 
      modal: true, 
      buttons: { 
       "<?php echo lang('event:delete') ?>": function() { 
        $(this).dialog("close"); 
       }, 
       "<?php echo lang('global:cancel_label') ?>": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    e.preventDefault(); 
    }); 
});

編輯：改進根據斯科特建議

來源

2012-04-25 12:38:45

尼斯邁克爾，也許該頁面被髮送，因爲我不寫「返回假」現在它不發送任何。此外，我修正了樣式：「display：none」，直到我點擊不是按鈕的按鈕，而是使用Twitter Bootstrap作爲按鈕樣式的HREF時，才顯示DIV。非常感謝，並指出你的所有要點！ – ReynierPM 2012-04-25 12:47:40

我可能會將'e'傳入函數並調用'e.preventDefault（）;'來防止點擊操作而不是'return false'，因爲它也會調用'e.stopPropogation（）;'來防止其他事件冒泡向上。 – 2012-04-25 12:50:38

嗯，你可以發佈樣本@Scott – ReynierPM 2012-04-25 12:53:05

這也發生在我身上。我所知道的只有一個原因。對話框CSS文件未被加載。

見我的SO問題：position:fixed breaks in IE9

來源

2012-04-25 12:34:40 Dutchie432

jQuery UI對話框顯示不正確

回答

相關問題