Использование jquery для создания наложения, но контент наследует непрозрачность CSS - PullRequest
Новая
       10

Использование jquery для создания наложения, но контент наследует непрозрачность CSS

3 голосов
/ 08 июня 2009

Я создал своего рода модальное наложение, а затем содержимое с наложением. У модального наложения установлена ​​прозрачность, и оно работает, но у содержимого наложения также есть прозрачность ... я думаю, что оно наследует его ... Если вы действительно хотите применить новый класс к контенту, есть ли способ сказать, что он применяется только к

вот мой css 

.modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000000;
    display: none;
}

и мой jquery для создания модели и контента 

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES

$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);  /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay...  Its standard html

$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);

Ответы [ 5 ]

8 голосов
/ 08 июня 2009

Свойство CSS "opacity" не наследуется, хотя может показаться, что так оно и есть.

Поскольку содержимое в пределах , при наложении непрозрачность будет, в лучшем случае, непрозрачностью родительского (наложение). Итак, если родитель имеет непрозрачность 0,5, то визуально все его дочерние элементы могут только когда-либо достичь этой непрозрачности (не выше).

Чтобы избежать этого, элементы должны быть отдельными в HTML. Я знаю, что это боль, и я думаю, что CSS действительно должен иметь какой-то способ справиться с этим, но, к сожалению, это не так.

Другой метод, который будет работать с вложенными элементами, - это забыть о свойстве opacity и вместо этого использовать изображение PNG с альфа-прозрачностью и установить его в качестве фона для наложения.

2 голосов
/ 09 июня 2009

следующие js, которые были написаны на jquery 1.3: 

$(document).ready(function() {
        $(document.body).prepend('<div class="modalOverLay"></div>');
        $('.modalOverLay').css({ opacity: 0.5, width: '100%', height: '100%' });
        $('#trigger').click(function() {
            $('.modalOverLay').fadeIn('slow');
            $('.contentBox').css({
                position: 'absolute',
                left: ($(document).width() - $('.contentBox').width()) / 2,
                top: ($(document).height() - $('.contentBox').height()) / 2
            });
            $('.contentBox').fadeIn(500);

        });
    });

и следующая разметка: 

<a href="#" id="trigger">Trigger Modal pop up</a>
<div class="contentBox">
    <p>I am on overlay but don't have the same opacity</p>
</div>

таким образом, ваш контент не будет иметь такой же непрозрачности, как ваш модальный оверлей, и будет приятно сидеть в середине того, на что мы все иногда смотрим слишком много !! :)

2 голосов
/ 08 июня 2009

Если я правильно понял ваш вопрос, это всего лишь следствие того, как непрозрачность работает прямо сейчас: дочерние элементы наследуют непрозрачность как диапазон, поэтому значение их непрозрачности нормализуется по отношению к родителю, похоже на то, как высота / ширина может работать. Таким образом, значение «1» для ребенка действительно означает «100% от 0,8». Также нет никакого способа получить 110%, если вы мысленно направлялись туда.

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

Множество хороших обсуждений по этому поводу в сети, я держу этот в закладки.

0 голосов
/ 24 октября 2009

Хорошая публикация. Я долго думал над тем, чтобы перебрать функциональность сексуального окна предупреждений mootls. Пост Али работает отлично, но затем мне нужно добавить свойство z ​​index, чтобы мой div отображался поверх оверлея. просто нижний zindex для оверлей и higner zindex для моего div сработали. спасибо.

0 голосов
/ 08 июня 2009

Ваш контент не должен быть частью оверлея. Наложение используется для предотвращения доступа к обычному контенту, а не для размещения модального контента.

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

Кроме того, в jQuery UI есть виджет Dialog , который можно использовать для модальных действий.

...