jquery ui 对话框无法打开

Question

我试图在用户单击锚链接后打开 Jquery UI 对话框。

我正在使用 Jquery 1.5.2 和 UI 1.8.11，并且没有收到任何错误消息。我正在遵循此页面上的示例： jquery ui 对话框文档

我的 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() {
    $('#showPayTypeOptions').click(function(){

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

看看是否会打开模式。如果是这样，那么您需要先声明模态块，然后再尝试打开它。

Answer 3

$(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 4

创建像这里这样的函数 http://pluksza.blogspot .com/2011/06/jquery-ui-dialog-open-good-practise.html 并将事件绑定到按钮

Answer 5

我遇到了非常相似的问题，但我的模式打开了一瞬间，然后就消失了。当我单击“打开对话框”按钮时，我通过观察 Chrome 开发工具 Elements 选项卡中的 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
  });

});

希望这对某人有帮助

Answer 6

尝试将对话框存储在变量中并引用它。我已经成功地这样做了：

$(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 7

一旦你声明了对话框（在“打开”之前），你可以使用 DOM 检查器（firebug）来检查 div 吗？声明对话框后，您应该会看到 jQuery 创建的许多附加标记。 ui-widget、ui-dialog 等...