Как уменьшить свою веб-страницу, чтобы сосредоточить ваше внимание на баннере? (ярко-яркие эффекты на вашей веб-странице)

Мне было интересно, как этот эффект создается на определенных веб-страницах:

При загрузке веб-страницы в качестве верхнего слоя отображается баннер с кнопкой закрытия, а фактическая веб-страница отображается как нижний уровень; веб-страница полностью недоступна, так что фокус внимания, естественно, падает на баннерное объявление с закрытой кнопкой. И нажав эту кнопку закрытия в объявлении, фактическая веб-страница отображается немедленно, но теперь вернемся к ее первоначальной яркости.

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

И мой вопрос здесь: как вы получаете этот эффект яркости и яркости на своей веб-странице?

PS:

  • Я знаю о z-index в css, поэтому мне просто нужно знать тусклую часть.
  • Я ищу решение на основе css (или перефразирую его, без использования каких-либо скриптов вроде js), если это возможно.

Спасибо, ребята.

Ответы

Ответ 1

Что - то вроде этого? Очень минимальный сценарий.

HTML

<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>

JQuery

$(document).ready(function() {
    $(".overlay, .overlay-message").show();

    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});

CSS

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#fff;
    opacity:1;
    z-index:1002;
}


.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    display:block;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#eee;
    border:1px solid #000;
    opacity:1;
    z-index:1002;
    box-sizing:border-box;
    padding:100px 50px;
}

.overlay-message:hover { 
    cursor:pointer; 
}
<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".overlay, .overlay-message").show();
    
    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});
</script>

Ответ 2

Вы можете сделать это, используя селектор: target в CSS и непрозрачность, но оба они недоступны в большинстве браузеров.

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

Обычно вы должны использовать абсолютно позиционированное 100% окно ширины и высоты с фоновым цветом, который rgba с прозрачным резервным png.

Укладка этого типа будет работать:

#dim {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background: url('semitransparent1x1.png');
    background: rgba(0, 0, 0, 0.8);

    z-index:100;
}

Затем используйте некоторый простой jQuery, чтобы показать его и удалить.