jQuery 对话框 - 位于对话框输入顶部的 div 被禁用答案

【问题标题】：jQuery dialog - div positioned on top of dialog box inputs disabledjQuery 对话框 - 位于对话框输入顶部的 div 被禁用
【发布时间】：2014-01-16 15:30:59
【问题描述】：

问题是这样的：

打开一个对话框。我单击对话框的输入字段以打开一个绝对位于对话框上方的 div。无法与输入交互。

这是Jsfiddle上的示例

您可以将鼠标悬停在输入上，鼠标光标将变为“I”图标。您甚至可以与绝对定位的 div 上的关闭锚标记进行交互。这不是 z-index 问题。它适用于 jQuery UI 1.9 及更早版本。奇怪的是，在将绝对 div 添加到 DOM 之后，如果在 body html 的末尾附加一个空 div（使用 firebug 实时编辑代码），输入就可以了。

有什么想法吗？

提前致谢，

邦特克

$('#open_dialog').click(function (event) {

var dialog_html = '<div id="dialog_body">' + 
                      '<input type="text" name="test1"/>' +
                  '</div>';

$(dialog_html).dialog({
    title: 'WTF Test',
    height: 110,
    width: 300,
    modal: 'true',
    close: function () {
        $(this).remove();
        $('#test_div').remove();
    }
});

//dialog input click
$('input[name=test1]').click(function (event) {
    var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'),
        body = $(document.body);

        if ($('#test_div').length === 0) {
            //append div to body
            html.appendTo(body);
            //add close functionality to test_div
            $('#test_close').click(function (event) {
                event.preventDefault();
                //remove test_div from DOM
                $(event.currentTarget).parent().remove();
            });
        }
});
});

【问题讨论】：

我没有任何解决方案，但在测试您的小提琴时，我能够确认您的发现，并获得了更多数据点。我将输入设置为一个复选框，它能够很好地处理点击事件。即使使用 chrome 调试器将文本框的状态设置为：focus，它也没有获得焦点，所以问题似乎特定于键盘焦点，但这就是我所拥有的。

标签： javascript jquery jquery-ui

【解决方案1】：

dialog_html 对话框设置为modal: 'true'，这意味着它将停用页面上的所有其他内容。如果您删除它，它会消除任何问题。我认为您得到的结果好坏参半，因为您在 jQuery 使对话框模式化之后添加到 DOM，并且您实际上根本不应该与第二个弹出窗口进行交互，但它正在破坏。您可能想尝试制作第二个弹出模式，或者将其添加为第一个对话框的子项，而不是将其附加到 document.body

【讨论】：

不幸的是，在 jsfiddle 中将 modal 设置为 false 并不能解决问题。
将 modal 设置为 false 不会改变任何东西，但删除整行会。
刚刚注意到这是因为布尔值周围有单引号，这意味着“假”无法正常工作。在没有他们的情况下做出改变。

【解决方案2】：

抱歉回复晚了，解决办法如下：

http://jsfiddle.net/aY9ms/5/

我希望对话框是模态的。你是对的，添加 DOM 是因为对话框的工作方式。在我的情况下，最好将任何 html 添加到对话框父级以更好地清理内存。并且调整对话框上的溢出可以让 div 随意浮动在对话框上。

感谢所有反馈和帮助！

var $ = $j;
var dialog_html = '<div id="dialog_body">' + 
                      '<input type="text" name="test1"/>' +
                  '</div>';

$(dialog_html).dialog({
    title: 'WTF Test',
    height: 110,
    dragable: true,
    width: 300,
    modal: 'true',
    close: function () {
        $(this).remove();
        $('#test_div').remove();
    }
});

//dialog input click
$('input[name=test1]').click(function (event) {
    var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'),
        dialog_box = $('#dialog_body').parent(),
        body = $(document.body);

        //adjust css
        dialog_box.css({'overflow': 'inherit'});

        if ($('#test_div').length === 0) {
            //append div to body
            //html.appendTo(body);
            html.appendTo(dialog_box);
            //add close functionality to test_div
            $('#test_close').click(function (event) {
                event.preventDefault();
                //remove test_div from DOM
                $(event.currentTarget).parent().remove();
            });
        }
});

【讨论】：