jQuery UI Dialog第二次没有打开 [英] jQuery UI Dialog not opening a second time

问题描述

我正在使用 jqueryui 获取对话框。第一次点击点击模态链接有效。按 ESC 键时，对话框消失。但之后的点击不起作用。我希望那些也能奏效。刷新页面使一切正常。

I am using jqueryui for a dialog box. Clicking on the 'Click for a modal' link the first time works. When pressing the ESC key, the dialog box disappears. But the clicks after that don't work. I want those to work as well. Refreshing the page makes everything OK.

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>   

如何进行多次点击？

推荐答案

四件事。

首先，如果对话框应该是可重复使用的，那么你需要先创建它 第一次单击并将 autoOpen 选项设置为 false 。要打开对话框，您应该使用对话框（'打开'）。

Firstly, if the dialog should be reusable, you'll want to create it before the first click and set the autoOpen option to false. To open the dialog, you should use 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'）。这样效率更高，因为否则，jQuery必须在一段代码中多次查找 #dialog 。

Note that I create a var dialog to save $('#dialog'). This is more efficient, because otherwise, jQuery would have to look for #dialog multiple times in one piece of code.

其次，你的HTML中有一个错误：这里有一个引用太多：

Secondly, you have an error in your HTML: there is one quote too many here:

<div class="demo" ">

这可能会导致某些浏览器（但不是全部）出现意外行为，很难调试。删除额外的报价。

This might cause unexpected behaviour in some browsers (but not all), which makes it hard to debug. Remove the extra quote.

第三，如果我没记错的话，jQuery UI Dialog已经处理了 ESC key，所以你不必自己动手。如果你想做的事情不是在按下exscape时关闭对话框，你应该使用对话框的 beforeClose event。如果要做的就是关闭对话框;你们都是设置。： - ）

Thirdly, if I recall correctly, jQuery UI Dialog already handles the ESC key, so you don't have to do that yourself. If you want to do something other than close the dialog when exscape is pressed, you should actually use the dialog's beforeClose event. If all you want to do is close the dialog; you're all set. :-)

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

And finally, it's good practice not to use inline styles. So instead of this:

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

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

Create a CSS file with the following:

.click_me {
    font-size:15px;
}

你可以为 #dialog做同样的事情，包括您现在使用JavaScript的边框：

You can do the same for #dialog, including the border you're now applying with JavaScript:

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

希望这会有所帮助。

这是一个应用我提到的四点的工作示例： http://jsfiddle.net/PPvG/yHTJw/

Here is a working example which applies the four points I mentioned: http://jsfiddle.net/PPvG/yHTJw/

请注意，缺少jQuery UI样式，因此对话框有点难看。 ： - ）

Note that the jQuery UI styles are missing, so the dialog is a bit ugly. :-)

为了确保Dialog按预期工作，请确保您使用的是最新版本的jQuery和jQuery用户界面和你包含一个jQuery UI主题。

To ensure the Dialog works as expected, make sure that you are using the latest versions of jQuery and jQuery UI and that you include a jQuery UI Theme.

这是一个通过 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" />

将这些包含在< head> 中你的HTML。结果应该是这样的。如果没有，您可以尝试以下几点：

Include these in the <head> of your HTML. The result should look like this. If it doesn't, you can try a couple of things:

• 查看浏览器的JavaScript控制台（每个现代浏览器都有一个） ; Google it）。


• 尝试使用其他浏览器。


• 尝试不同的加载页面方式（例如通过文件：// 与via localhost ）。


• （极端情况:)尝试使用其他计算机和不同的互联网连接。

• Have a look at your browser's JavaScript console (every modern browser has one; Google it).
• Try a different browser.
• Try a different way of loading the page (e.g. via file:// versus via localhost).
• (Extreme case:) Try a different computer and a different internet connection.

如果这些都不起作用，我很遗憾地说，但是......你这样做了错误。 :-P

If none of those work, I'm sorry to say, but... "you're doing it wrong". :-P

请注意，上面的代码段将包含名为base的默认jQuery UI主题。如果它不符合您的需求，您可以将Google CDN用于其他一些默认主题（请参阅此博客文章），或者您可以使用 ThemeRoller 创建自己的主题。

Note that the snippet above will include the default jQuery UI theme called "base". If it doesn't fit your needs, you can use Google CDN for a few other default themes (see this blog post), or you can create your own theme using ThemeRoller.

修改：

至确保Dialog保持焦点（因此当用户按 ESC 时关闭，即使用户点击页面上的其他位置），尝试设置 modal 为true：

To make sure the Dialog retains focus (and thus is closed when the user presses ESC, even if the user clicked somewhere else on the page), try setting modal to true:

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

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

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

通常情况下，用户仍然可以与其他项目进行互动在页面上（因此，这些项目可以从对话框中获取焦点）。当模态选项设置为 true 时，用户无法再与页面的其余部分和对话框进行迭代无论如何都会保持专注。

Normally, the user can still interact with other items on the page (and, consequently, those items can grab focus away from the Dialog). When the modal option is set to true, the user can no longer iteract with the rest of the page and the Dialog will keep focus no matter what.

希望这会有所帮助。

这篇关于jQuery UI Dialog第二次没有打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！