如何讓我自己的jQuery對話框使用不透明度，如jQuery UI對話框？

我正在滾動我自己的jQuery對話框。如何讓我自己的jQuery對話框使用不透明度，如jQuery UI對話框？

我想讓我的對話框在後臺「變黑屏幕」，並像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'); 
};

我知道我正在重新發明輪子，但我真的很想知道如何使這項工作！

來源

2011-08-01 Daniel Allen Langdon

這聽起來像一個Z指數的問題。看看我的博客文章在這個問題上：http://www.dittocode.com/a-simple-jquery-modal-box/

來源

2011-08-01 19:15:57

下面的例子幫助我理清了它，但我仍然不完全確定錯誤發生在哪裏。 –

鏈接到的網站現在被蹲在域名上的公司蹲坐。 –

我個人不會使用position：fixed，因爲它不是很適合瀏覽器。我也會使用一些更高的z-index，因爲你肯定會給你一個z-index的內容，並且你希望它出現在最前面。因爲它重用了模式，這很好，因爲對於較低版本的IE來說，這些東西實際上是非常昂貴的（IE在透明度上很糟糕）。

第一，你的對話變得透明，因爲它的父（模態）是透明的。你應該讓模態成爲兄弟姐妹而不是父母。

來源

2011-08-01 19:17:03 aepheus

如何讓我自己的jQuery對話框使用不透明度，如jQuery UI對話框？

回答

相關問題