我正在滚动我自己的 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');
};
我知道我正在重新发明轮子，但我真的很想知道如何让它发挥作用!
最佳答案
听起来像是 z-index 问题。查看我关于此主题的博客文章:http://www.dittocode.com/a-simple-jquery-modal-box/
关于javascript - 如何使我自己的 jQuery 对话框像 jQuery UI 对话框一样使用不透明度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6903084/