Blur hinter Popup auf Seite laden Problem

Ich arbeite auf einer Website mit einem Popup, das einzige, was ich vermisse, ist ein Unschärfe-Effekt, wenn dieses Pop-up angezeigt wird. Dieses Pop-Up wird jedes Mal angezeigt, wenn die Seite geladen wird. Daher habe ich hier auf SO einen tollen Unschärfe-Code gefunden. Obwohl dieser Code für eine Funktion verwendet wird, bei der der Unschärfeeffekt durch eine Schaltfläche angezeigt wird. Aus diesem Grund habe ich den Code geändert, so dass anstelle der Schaltfläche jetzt onLoad ist, die aus dem Body-Tag gestartet wird. Das einzige Problem ist, dass die Unschärfe vor dem tatsächlichen Pop-up angezeigt wird, das es nicht soll. Ich habe versucht, die z-index im CSS-Code für das Popup zu ändern, aber es funktioniert nicht.Blur hinter Popup auf Seite laden Problem

Hier ist die JSFiddle für meinen Code (modifiziert) Auch das funktioniert anscheinend nicht auf 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; 
}

Hier ist die JSFiddle für den Lagercode aus der SO-Antwort.

Quelle

2016-08-01 Sm00rf9000

body Etikett sollte den gesamten Seiteninhalt umhüllen. Sie können wie folgt vorgehen:

<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>

Siehe jsfiddle

Quelle

2016-08-01 15:14:19 mtb

Vielen Dank, ich habe habe es in meinen ursprünglichen Code implementiert und es funktioniert jetzt wie ein Zauber. – Sm00rf9000

In diesem Fall ist es, weil Sie die Unschärfe im Körper setzen. Die beste Aprouch, ich denke, ist eine Div erstellen, um den Blur zu setzen, zeigen Sie dieses div in 100% e nach dem Popup mit einem Z-Index höher als der Blur.

Quelle

2016-08-01 15:24:17

Das Anwenden von Unschärfen auf ein Tag hat Auswirkungen auf alle inneren Tags. Versuchen Sie es auf diese Weise.

tun keinen Satz alle möglichen Arten auf dem Körper selbst:

<body onload="myBlurFunction(true)">

nicht Ihr Pop-up innerhalb der Overlay umfasst (I eine Knopf- hinzugefügt sollten Sie eine Stelle eines Anker verwenden):

<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>

Wie Sie sehen können, habe ich die Unschärfe css-Klasse direkt zum Overlay hinzugefügt (unkommentierter Code).

Ändern Sie bitte Ihre Skripte:

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'; 
    } 
};

stellen Sie Ihren Popup-Position festgelegt, weil es nicht ist in Ihnen mehr überlagern:

#popup { 
    position: fixed; 
}

Geige: https://jsfiddle.net/uy4xvz12/19/

Quelle

2016-08-01 15:24:46 Wolfgang

Update auf Geige, damit es in FF funktioniert. https://jsfiddle.net/uy4xvz12/25/ – Wolfgang

Blur hinter Popup auf Seite laden Problem

Antwort

Verwandte Themen