Question

我正在使用模式对话框在页面上弹出，要求用户输入一些信息才能继续。显然，modal属性禁用了faded div后面页面上的所有其他控件，这正是我们想要的。然而，在这种情况下，有一个＆＃34;注意＆＃34;必须始终能够输入的字段 - 即使对话框正在显示。在实际的应用程序中，它是一个滑出面板，但这里是一个小提琴，试图访问模态弹出窗口后面的页面上的第二个文本区域：

HTML：

<div id="modal-dialog">
    <textarea id="my-text"></textarea>
</div>
<label for="my-text2">TRY to input text...</label>
<textarea id="my-text2" style="position:relative; z-index:10000"></textarea>

使用Javascript：

$("#modal-dialog").dialog({
    autoOpen: true,
    modal: true,
    _allowInteraction: function (event) {
        alert('test');
        return !!$(event.target).is("#my-text2") || this._super(event);
    }
});

http://jsfiddle.net/6bhdpg12/

有没有办法获得文本区域＆＃34; my-text2＆＃34;可编辑？谢谢！

Answer 1

通过设置modal: false，弹出窗口将不再像模态一样，您将能够与页面上的其他元素进行交互。

如果要保留模态窗口的某些效果并想要实现覆盖，则需要创建窗口小部件。确保它位于模态jQuery之前：

$.widget( "ui.dialog", $.ui.dialog, {
    _allowInteraction: function (event) {
        return !!$(event.target).is("#my-text2") || this._super(event);
    }
});

然后你将保留现有的模态窗口jQuery：

$("#modal-dialog").dialog({
    autoOpen: true,
    modal: true,
});

我把你的小提琴分开并在这里更新：http://jsfiddle.net/mdeang2/yq5et92g/1/

访问jQuery UI模式对话框后面的文本区域

1 个答案: