jquery ui對話框將不會打開

Question

我想在用戶點擊一個錨鏈接之後打開一個Jquery UI對話框。

我正在使用Jquery 1.5.2和UI 1.8.11，並沒有收到任何錯誤消息。我下面這個頁面上的例子：jquery ui dialog documentation

我的JS：

$(document).ready(function() { 
    $('#payTypeOptions').dialog({ 
    autoOpen: false, 
    height:600, 
    width: 600, 
    modal: true 
}); 

    $('#showPayTypeOptions').click(function(){ 
    $('#payTypeOptions').dialog('open'); 
    //If I put an alert() here, the alert shows 
    }); 

}); 

的HTML：

<a id="showPayTypeOptions">Do something</a> 

<div id="payTypeOptions"> 
<p>Content</p> 
</div> 

感謝。

編輯：代碼沒有錯。這是導入過程中的用戶錯誤 - doh！

Answer 1

我以前也曾經遇到過這種情況，它與進口產品有關。 要查看是否屬於這種情況，請嘗試以下腳本和樣式。 嘗試：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

Answer 2

$(document).ready(function() { 
    $('#payTypeOptions').dialog({ 
     autoOpen: false, 
     height:600, 
     width: 600, 
     modal: true 
    }); 

    $('#showPayTypeOptions').click(function(){ 
     $('#payTypeOptions').dialog('open'); 
     //If I put an alert() here, the alert shows 
    }); 
}); 

你必須圍繞交換他們，我想，在你第一次創建對話框，然後調用它。

Answer 3

試試這個：

$(document).ready(function() { 
    $('#showPayTypeOptions').click(function(){ 

     $('#payTypeOptions').dialog({ 
      autoOpen: false, 
      height:600, 
      width: 600, 
      modal: true 
     }); 
    }); 
}); 

如果打開的模態見。如果確實如此，那麼在您嘗試打開它之前，您需要首先聲明該模塊。

Answer 4

嘗試將對話框存儲在變量中並引用它。我已經成功做這種方式：

$(document).ready(function() { 
    var mydialog = $('#payTypeOptions').dialog({ 
    autoOpen: false, 
    height:600, 
    width: 600, 
    modal: true 
    }); 

    $('#showPayTypeOptions').click(function(){ 
    mydialog.dialog('open'); //Changed here 
    //If I put an alert() here, the alert shows 
    //Also, you should probably return false here to prevent the browser 
    // from following the link (or doing something weird since you don't have 
    // an href). 
    return false; 
    }); 

}); 

Answer 5

一旦你聲明的對話框（你之前「開放」），你可以使用DOM檢查（螢火蟲）審查DIV？一旦聲明對話框，你應該會看到很多由jQuery創建的附加標記。 UI的小部件，用戶界面，對話框等..

Answer 6

創建喜歡這裏http://pluksza.blogspot.com/2011/06/jquery-ui-dialog-open-good-practise.html和綁定事件功能按鈕

Answer 7

我有一個非常類似的問題，但對於一個拆分我開模秒鐘後消失。我點擊了我的「打開對話框」按鈕，通過觀察Chrome開發工具元素選項卡中的HTML更改來制定解決方案。您必須記住，如果它是一個按鈕或鏈接，則會從單擊的元素返回false，否則您的頁面將被重新張貼或取消，並且會丟失對話框。所以，我的代碼看起來是這樣的：

$(document).ready(function() { 

    $('#payTypeOptions').dialog({ 
    autoOpen: false, 
    height: 600, 
    width: 600, 
    modal: true 
    }); 

    $('#showPayTypeOptions').click(function() { 
    $('#payTypeOptions').dialog('open'); 
    return false; // This makes all the difference in my case 
    }); 

}); 

希望這可以幫助別人