Question

如何阻止jQuery对话框关闭其开启者？

我有一个很大的文本区域，在打开对话框时会聚焦。如果页面向下滚动到底部，则对话框打开时。当对话框关闭时，jQuery UI会聚焦textarea，并使页面跳回到顶部。

单击锚点，然后关闭对话框。

<div>
    <a id="click-me" href="#bottom">Click me</a>
</div>
<div>
    <textarea style="height: 2000px">
        ...
    </textarea>
</div>
<div>
    <a id="bottom" name="bottom"></a>
</div>

$(function() {
    $('#click-me').click(function() {
        $('textarea').focus();
        setTimeout(function() {
            $('<div>').text('Close me please!').dialog({
                modal: true
            });
        });
    });
});

jQuery UI的违规行是https://github.com/jquery/jquery-ui/blob/86eaa30994657b650b26388e87ecff679cf93a50/ui/jquery.ui.dialog.js#L181

（注意：以上只是一个自动化示例，在实际用例中，用户向下滚动窗口，打开一个对话框（通过单击一个不会窃取焦点的按钮，使用{{1} }），当它关闭时，窗口跳回到顶部。

如果您看到：http://jsfiddle.net/bPqF2/9并单击文本区域，向下滚动，等待对话框弹出，关闭时窗口将滚动到顶部。

Answer 1

这个怎么样？您可以根据自己的喜好调整滚动。如果您愿意，也可以滚动到文本区域的末尾

<div> 
    <a id="click-me" href="#bottom">Click me</a>
</div>
<div>
    <textarea id="myTxtArea" style="height: 2000px"></textarea>
</div>
<div> 
     <a id="bottom" name="bottom"></a>
</div>
<div data-role="dialog" id="myDialog"></div>

$(function () {
    $('#click-me').click(function () {
        var pos = $(document).scrollTop(); // get current position before focus
        $('textarea').focus();
        setTimeout(function () {
            $('#myDialog').text('Close me please!').dialog({
                modal: true,
                close: function (event, ui) {
                    console.log("dialog has closed");
                    $('#myTxtArea').blur();
                    $("html, body").scrollTop(pos);
                }
            });
        });
    });
});

Here is a demo on jsFiddle

Answer 2

将您的href="#bottom"更改为href="javascript:void(0);"

为什么不添加.blur()来撤消用户对textarea的关注？

小提琴： http://jsfiddle.net/bPqF2/8/

防止jQuery对话关闭开启者

2 个答案: