Размытие за всплывающим окном при загрузке страницы проблема

Я работаю на сайте с всплывающим окном, единственное, чего мне не хватает, - это эффект размытия, когда это всплывающее окно появляется. Это всплывающее окно будет отображаться каждый раз, когда страница загружается, поэтому я нашел отличный код размытия здесь на SO. Хотя этот код предназначен для функции, где эффект размытия отображается кнопкой.
Из-за этого я изменил код, так что вместо кнопки он теперь onLoad, который запускается из тега body.
Единственная проблема заключается в том, что пятно появляется перед фактическое всплывающее окно, которого не должно быть. Я попытался изменить z-index в коде CSS для всплывающего окна, но это не работает.



Вот JSFiddle для моего кода (модифицированного) также, по-видимому, это не работает на Safari.



HTML: 



<div id="overlay"> 

<div id="popup"> 

<a href="javascript:myBlurFunction(0);">X</a> 

</div>

</div>



<body id="main_container" onload="myBlurFunction(1)">



</body>


Javascript: 



myBlurFunction = function(state) {

    var containerElement = document.getElementById('main_container');

    var overlayEle = document.getElementById('overlay');



    if (state) {

        overlayEle.style.display = 'block';

        containerElement.setAttribute('class', 'blur');

    } else {

        overlayEle.style.display = 'none';

        containerElement.setAttribute('class', null);

    }

};


CSS: 



.blur   {

    filter: blur(5px);

    -webkit-filter: blur(5px);

    -moz-filter: blur(5px);

    -o-filter: blur(5px);

    -ms-filter: blur(5px);

}



#overlay    {

    position: fixed;

    display: none;

    left: 0px;

    top: 0px;

    right: 0px;

    bottom: 0px;

    background: rgba(255,255,255,.8);

    z-index: 999;

}



#popup {

    position: absolute;

    width: 400px;

    height: 200px;

    background: rgb(255,255,255);

    border: 5px solid rgb(90,90,90);

    left: 0px;

    right: 0px;

    top: 0px;

    bottom: 0px;

    margin: auto;

}


Вот JSFiddle для биржевого кода из ответа SO.

759   3  

3 ответов:

body тег должен обернуть все содержимое страницы. Вы можете сделать следующее: 

<body onload="myBlurFunction(1);">
  <div id="overlay"> 
   <div id="popup">
    <a href="javascript:myBlurFunction(0);">X</a> 
   </div>
  </div>

  <div id="main_container"> 
      Whatever
  </div>
</body>

См. jsfiddle

2  
2016-08-01 18:14:19

В данном случае это происходит потому, что вы устанавливаете размытие в теле. Лучший пример, я думаю, это создать Div, чтобы поставить размытие, e показать этот div в 100% e после всплывающего окна с Z-индексом выше, чем размытие.

0  
2016-08-01 18:24:17

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

Не устанавливайте никаких стилей на самом теле: 

<body onload="myBlurFunction(true)">

Не включайте всплывающее окно в оверлей (я добавил кнопку - Вы должны использовать ее вместо якоря): 

<div id="overlay" class="blur"></div>
<div id="popup">
  <button onclick="javascript: myBlurFunction(false);">X</button> 
  <a href="javascript: myBlurFunction(false);">LINK X</a> 
</div>

Как вы можете видеть, я добавил класс blur css непосредственно в оверлей (раскомментированный код).

Измените свои скрипты: 

myBlurFunction = function(state) {
    var overlayEle = document.getElementById('overlay');
    var popupEle = document.getElementById('popup');

    if (state) {
        overlayEle.style.display = 'block';
        //overlayEle.setAttribute('class', 'blur');
        popupEle.style.display = 'block';
    } else {
        overlayEle.style.display = 'none';
        //overlayEle.setAttribute('class', null);
        popupEle.style.display = 'none';
    }
};

Установите положение всплывающего окна в фиксированное, потому что его нет в вашем наложении больше:

#popup {
    position: fixed;
}

Скрипка: https://jsfiddle.net/uy4xvz12/19/

0  
2016-08-01 18:33:08

Comments

    Ничего не найдено.
Click here to cancel reply.