Question

问题在于：

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

上的示例

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

有什么想法吗？

提前致谢，

Bontke

$('#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();
            });
        }
});
});

Answer 1

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

Answer 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();
            });
        }
});

jQuery对话框 - 禁用对话框输入顶部的div

2 个答案: