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

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

Answer 5

我遇到了一个非常类似的问题但是我的模态开了一瞬间然后就消失了。当我点击“打开对话框”按钮时，我通过观察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
  });

});

希望这有助于某人

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等...

jquery ui对话框无法打开

7 个答案: