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

【问题标题】：How can I make my own jQuery dialog use opacity like the jQuery UI Dialog?如何让我自己的 jQuery 对话框像 jQuery UI 对话框一样使用不透明度？
【发布时间】：2011-08-01 19:05:24
【问题描述】：

我正在滚动我自己的 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');
};

我知道我在重新发明轮子，但我真的很想知道如何让这项工作发挥作用！

【问题讨论】：

标签： javascript jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

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

【讨论】：

跟随你的例子帮助我理顺了它，但我仍然不完全确定错误在哪里。
链接到的网站现在被抢注域名的公司抢注。

【解决方案2】：

我个人不会使用 position:fixed，因为它不是很兼容浏览器。我还会使用一些更高的 z-index，因为您一定会拥有要为其提供 z-index 的内容，并且您希望它出现在顶部。

另外，你的第二个实现要好得多，因为它重用了模式，这很好，因为这些东西对于低版本的 IE 来说实际上是相当昂贵的（IE 在透明度方面很烂）。

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

【讨论】：