Question

我正在编写自己的jQuery对话框。

我希望我的对话框在后台“将屏幕变暗”，并像jQuery UI对话框一样“模态”。

然而，我遇到了麻烦。我尝试过这两种不同的方式，但都没有产生令人满意的结果。

这是一种不起作用的方法。当我这样做时，我的对话框显示为透明。

functions.OpenDialog = function (dialogId) {
    _initializeDialog(dialogId);
    var dialog = $('#' + dialogId);
    var dialogWrapper = $("[data-type='dialogWrapper'][data-dialogid='" + dialogId + "']")
    dialogWrapper.show();
    dialog.show();
};

function _initializeDialog(dialogId) {
    var dialog = $('#' + dialogId);
    dialog.wrap("<div></div>");
    var dialogWrapper = dialog.parent();
    dialogWrapper
        .attr('data-type', 'dialogWrapper')
        .attr('data-dialogid', dialogId)
        .css('position', 'fixed')
        .css('top', '0px')
        .css('left', '0px')
        .css('height', '100%')
        .css('width', '100%')
        .css('display', 'none')
        .css('background-color', 'black')
        .css('opacity', '0.8')
        .css('z-index', '1000');
    dialog.css('position', 'fixed');
    _initializedDialogIds.push(dialogId);
}

这是另一种方法。此方法适用于IE，但不适用于Firefox。当我尝试在Firefox中运行此代码时，对话框出现在“掩码”后面，我无法点击任何内容。

function _appendMask() {
    var maskDivHtml = '<div id="' + _maskId + '"></div>';
    $(document.body).append(maskDivHtml);
    $('#' + _maskId).css('position', 'fixed');
    $('#' + _maskId).css('top', '0px');
    $('#' + _maskId).css('left', '0px');
    $('#' + _maskId).css('height', '100%');
    $('#' + _maskId).css('width', '100%');
    $('#' + _maskId).css('display', 'none');
    $('#' + _maskId).css('background-color', 'black');
    $('#' + _maskId).css('z-index', '0');
    _maskAppended = true;
}
functions.OpenDialog = function (dialogId) {
    if (!_maskAppended)
        _appendMask();
    $('#' + _maskId).css({ 'display': 'block', opacity: 0 });
    $('#' + _maskId).fadeTo(500, 0.8);
    if ($('#' + dialogId).css('z-index') == '0')
        $('#' + dialogId).css('z-index', '1');
    $('#' + dialogId).fadeIn(500);
    $('#' + dialogId).css('position', 'fixed');
};

我知道我正在重新发明轮子，但我真的很想知道如何使这个工作！

Answer 1

这听起来像是一个z索引问题。查看我关于此主题的博文：http://www.dittocode.com/a-simple-jquery-modal-box/

Answer 2

我个人不会使用position：fixed，因为它不是非常兼容浏览器。我还会使用一些更高的z索引，因为你必须拥有你给出z-index的内容，并且你希望它出现在最上面。

另外，你的第二个例子要好得多，因为它重用了模态，这很好，因为对于较低版本的IE来说这些东西实际上是非常昂贵的（IE很透明）。

首先，您的对话框变得透明，因为它的父级（模态）是透明的。你应该让模态成为兄弟而不是父母。

如何让我自己的jQuery对话框使用像jQuery UI Dialog这样的不透明度？

2 个答案: