0

I'm trying to open a Jquery UI dialog box after the user clicks on an anchor link.

I'm using Jquery 1.5.2 and UI 1.8.11 and am getting no error messages. I am following the example on this page: jquery ui dialog documentation

My 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
  });

});

The HTML:

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

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

Thanks.

Edit: There was nothing wrong with the code. It was user error in the import process - doh!

4

7 回答 7

4

I've had this happen to me before too and it had to do with the imports. To see if that's the case, try the following scripts and styles. try: 

<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>
于 2011-04-19T19:09:20.540 回答
1 
$(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
    });
});

You have to swap them around, I think, where you're creating the dialog box first, then calling it up.

于 2011-04-19T19:09:02.630 回答
1

尝试这个：

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

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

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

于 2011-04-19T19:10:55.310 回答
1

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

于 2011-06-23T09:58:25.930 回答
1

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

});

希望这可以帮助某人

于 2012-09-07T13:54:15.560 回答
0

尝试将对话框存储在变量中并引用它。我以这种方式成功地做到了：

$(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;
  });

});
于 2011-04-19T19:18:29.040 回答
0

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

于 2011-04-19T19:19:50.343 回答