Как я могу заставить свой собственный диалог jQuery использовать непрозрачность, как диалог jQuery UI? - PullRequest
Новая
       47

Как я могу заставить свой собственный диалог jQuery использовать непрозрачность, как диалог jQuery UI?

2 голосов
/ 01 августа 2011

Я переворачиваю свое собственное диалоговое окно 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');
};

Я знаю, что заново изобретаю колесо, но я бы действительнохотел бы знать, как сделать эту работу!

Ответы [ 2 ]

1 голос
/ 01 августа 2011

Лично я бы не использовал position: fixed, поскольку он не очень совместим с браузером.Я бы также использовал несколько более высоких z-индексов, потому что у вас обязательно должен быть контент, которому вы даете z-index, и вы хотите, чтобы он отображался сверху.

Кроме того, ваша вторая имплементация намного лучше,так как он повторно использует модальный, что хорошо, потому что эти вещи на самом деле довольно дороги для создания более низких версий IE (IE отстой в прозрачности).

Во-первых, ваш диалог становится прозрачным, потому что это родитель (модально) прозрачно.Вы должны сделать модального брата, а не родителя.

1 голос
/ 01 августа 2011

Звучит как проблема z-index.Проверьте мой блог в этой теме: http://www.dittocode.com/a-simple-jquery-modal-box/

...