jQuery UI对话框无法第二次打开。

Question

jQuery UI对话框无法第二次打开。

javascriptjqueryjquery-uijquery-ui-dialog

8

我正在使用jQuery UI来创建对话框。第一次单击“点击以打开模态框”链接正常工作。但按下ESC键后，对话框会消失，之后的点击无法生效。我希望这些也可以正常工作。刷新页面可以解决问题。

HTML：

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br />

<div class="demo" ">

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;">

       this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is   


</div><!-- end of id dialog -->
</div><!-- End demo -->

jQuery代码片段：

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>   
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script  type="text/javascript">

$(document).ready(function () {

    $(".click_me").bind('click', function (e) {
        e.preventDefault();
        $("#dialog").css('border', '5px solid #848484');
        $("#dialog").dialog({
            width: 460
        });
        //$( "#dialog" ).dialog( "option", "height", 180 );
    });

    $("body").bind("keyup#dialog", function (event) {
        // 27 == "esc"
        if (event.which == 27) {
            // TODO: close the dialog
            // unbind the event
            $("body").unbind("keyup.myDialog");
        }
    });

});
</script>

如何使多次点击生效？

- Istiaque Ahmed

1

为什么会有负面评价？请看一下我和PPvG之间的对话，问题仍未解决。 - Istiaque Ahmed

1

我认为你的问题被投票否决是因为它已经得到了回答，但你在评论中又问了一个新问题。专业提示：在提出下一个问题之前，请查看[ask]。 - Peter-Paul van Gemerden

3个回答

2

尝试使用$("#dialog").close();代替$("body").unbind("keyup.myDialog");。

- redmoon7777

实际上，如果我排除“Esc”键绑定和解绑，那么情况仍然是一样的。如果我排除它，有什么解决方案？ - Istiaque Ahmed

问题来自于代码的其他部分（我测试了这一部分，它运行良好）。 “.click_me”链接是新创建的吗（在ajax调用或某些事件之后）？ - redmoon7777

不是新创建的..哦，在这种情况下，我必须再次检查发布的代码片段。但是克里斯给出了一个信息丰富的答案。我还没有仔细阅读。 - Istiaque Ahmed

0

  .dialog({
            title: "Confirmation",
            modal: true, zIndex: 10000, autoOpen: true,
            resizable: false,
            width: 1000,
            height: 530,
            maxHeight: 1000,
            minHeight: 200,
            closeOnEscape: false,
            buttons: {
                Yes: function () {
                    CLOSEDDPROJECT.confirmCancelRequest();
                    $(this).dialog("close");
                },
                No: function () {
                    $(this).dialog("destroy");
                    $('.propagateRA').prop('checked', false);
                }
            },
            close: function () {
                $(this).remove();
            }
        });

尝试使用 $(this).dialog("destroy"); 而不是 $(this).dialog("close");。

- vipinlalrv

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter-Paul van Gemerden · Accepted Answer

四件事。

首先，如果对话框应该是可重复使用的，您需要在第一次单击之前创建它，并将autoOpen选项设置为false。要打开对话框，您应该使用dialog('open')。

例如：

$(document).ready(function () {

    var dialog = $('#dialog');

    dialog.dialog({              // <-- create the dialog
        width:    460,
        autoOpen: false
    });

    $(".click_me").bind('click', function (e) {
        e.preventDefault();
        dialog.dialog('open');   // <-- open the dialog
    });
});

请注意，我创建了一个var dialog来保存$('#dialog')。这样更有效率，因为否则，jQuery将不得不在同一段代码中多次查找#dialog。

其次，您的HTML存在错误：这里有一个额外的引号：

<div class="demo" ">

在某些浏览器中（但不是所有浏览器），这可能会导致意外的行为，从而使调试变得困难。移除多余的引号。

第三点，如果我没记错的话，jQuery UI对话框已经处理了ESC键，所以你不必自己处理。如果你想要在按下esc时执行其他操作而不是关闭对话框，你应该使用对话框的beforeClose事件。如果你只想关闭对话框，那就没问题了。:-)

最后，最好不要使用内联样式。所以，代替这个：

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a>

创建一个包含以下内容的CSS文件：

.click_me {
    font-size:15px;
}

您可以对#dialog采用相同的方法，包括您现在正在使用JavaScript应用的边框：

#dialog {
    border: 5px solid #848484;
    width:640px;
}

希望这对你有所帮助。

以下是一个可行的示例，应用了我提到的四个要点：http://jsfiddle.net/PPvG/yHTJw/

请注意，jQuery UI样式丢失，因此对话框有点丑。 :-)

为确保对话框按预期工作，请确保使用最新版本的jQuery和jQuery UI，并包含一个jQuery UI主题。

以下是一个通过Google CDN加载所有内容的示例：

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

在你的HTML文件的<head>标签中包含下面这些内容。最终结果应该看起来像这样。如果不是这样，你可以尝试以下几种方法：

查看浏览器的JavaScript控制台（现代浏览器都有一个，可以通过Google搜索了解）。
尝试另一个浏览器。
尝试使用不同的页面加载方式（例如通过file://与通过localhost）。
（极端情况：）尝试使用不同的计算机和不同的互联网连接。

如果以上方法都不起作用，很抱歉地告诉你......“你做错了”。:-P

请注意，上面的代码将包括名为“base”的默认jQuery UI主题。如果它不符合你的需求，你可以使用Google CDN提供的其他几个默认主题（请参见此博客文章），或者使用ThemeRoller创建自己的主题。

编辑：

为了确保对话框保持焦点（因此即使用户在页面的其他地方单击，也会在用户按下ESC时关闭），请尝试将modal设置为true：

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

jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/

通常情况下，用户仍然可以与页面上的其他元素交互（因此这些元素可以夺取Dialog的焦点）。当modal选项设置为true时，用户将无法与页面上其余部分进行交互，Dialog将始终保持焦点。

希望这有所帮助。