Question

我正在使用jqueryui作为对话框。第一次点击“点击模态”链接有效。按下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>

如何进行多次点击？

Answer 1

四件事。

首先，如果对话框应该是可重复使用的，那么您需要先创建第一次点击，然后将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 Dialog已经处理了ESC键，所以你不必自己动手。如果您想在按下exscape时关闭对话框以外的其他操作，您应该使用对话框的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样式，因此对话框有点难看。： - ）

为了确保Dialog按预期工作，请确保您使用的是最新版本的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>中。结果应该是like this。如果没有，您可以尝试以下几点：

查看浏览器的JavaScript控制台（每个现代浏览器都有一个;谷歌它）。
尝试其他浏览器。
尝试使用其他方式加载页面（例如，通过file://与localhost）。
（极端情况:)尝试使用其他计算机和不同的互联网连接。

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

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

修改

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

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

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

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

希望这有帮助。

Answer 2

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

Answer 3

  .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（＆＃34; destroy＆＃34;）;而不是$（this）.dialog（＆＃34; close＆＃34;）;

jQuery UI Dialog第二次没有打开

3 个答案: