Erstellen Sie coole Popup-Effekte mit JS+CSS3

Als ich gestern zu Hause fernsah, bemerkte ich beim Verlassen einen Popup-Effekt. Ich fand diesen Effekt sehr cool und viel besser als Volltonfarben und Transparenz Nachfolge und schließlich wurde der Effekt mit CSS implementiert, also kam ich heute Morgen früh zur Firma und suchte schnell nach. Obwohl die Kompatibilität sehr schlecht ist, kann es mit nur einem CSS-Attribut durchgeführt werden. Ich hatte sofort das Gefühl, dass ich so wenig wusste~~

Erinnern Sie sich zunächst an die Implementierung von Popup-Fenstern. Im Allgemeinen sind wir in zwei Ebenen unterteilt, die Popup-Fensterebene (Popus) und die Maske Normalerweise ist es üblich, alle diese beiden Elemente auf eine feste Positionierung festzulegen. Der spezifische Unterschied zwischen ihnen und der absoluten wird bekannt sein, sobald Sie sie ausprobieren. Für die Maskenebene benötigen wir nicht viel. Wir legen ihre Eigenschaften wie folgt fest, damit sie den gesamten Bildschirm abdeckt.

.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}

Die Popus-Ebene ist etwas problematischer. Hier haben wir zwei Implementierungsmethoden

1. Popus bekannter Größe Das Fenster , wie unten gezeigt, wird hauptsächlich durch den oberen, linken und negativen Rand implementiert.

.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}

2. Wenn die Größe des Popup-Fensters unbekannt ist, ermitteln Sie die Breite und Höhe der Popup-Fensterebene über js. und stellen Sie es dann wie oben ein, hier wird nicht viel erzählt.

3. Wenn CSS3 unterstützt wird, müssen wir die Breite und Höhe des Popup-Fensters nicht kennen, wir können es wie folgt einstellen

.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

Wird hauptsächlich über das Übersetzungsattribut festgelegt. Der Prozentsatz des Versatzwerts ist relativ zu seiner eigenen Breite und Höhe, daher ähnelt er im Prinzip der ersten Schreibmethode, ist jedoch bequemer zu verwenden.

Um zum Thema zurückzukehren, kehren wir zum Thema zurück, nämlich den Elementen den Gaußschen Unschärfeeffekt in PS erzielen zu lassen.

Hier kommt ein CSS-Attribut: Filter. Wenn Sie interessiert sind, können Sie hier ausführlich darauf eingehen. Wir werden heute nur über eine der Unschärfen sprechen. Schauen Sie sich zunächst die Vorschau unten an

ps: Derzeit unterstützt dieses Attribut nur Webkit-Browser, daher verwenden wir das CSS3-Attribut direkt und der Effekt muss ebenfalls vorhanden sein Webkit-Browser Schauen Sie sich

an. Der Code, der funktioniert, ist diese Zeile – webkit-filter:blur(8px). Der Pixelwert dahinter stellt den Grad dar Unschärfe. Natürlich können wir in täglichen Projekten auch einige Animationen hinzufügen, um die Seite lebendiger zu machen:

<div class=&#39;bg&#39;>
 <img  src=&#39;bg.jpg&#39; / alt="Erstellen Sie coole Popup-Effekte mit JS+CSS3" >
</div>
<div class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <div>
 <div class=&#39;left btn &#39;>确实不错</div>
 <div class=&#39;right btn&#39;>也就那样</div>
 </div>
</div>

css:

*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}

js:

$('.bg').on('click',function(){
 console.log(98)
 $(this).addClass('blur');
 $('.popus').show();
})
$('.btn').on('click',function(){
 $('.bg').removeClass('blur');
 $('.popus').hide();
})

Ist Ist das das Ende? Offensichtlich nicht, schauen Sie sich die Konsole an

Wenn wir das Fenster öffnen, müssen wir die Klickereignisse unserer anderen Ebenen deaktivieren, aber wir haben festgestellt, dass wir die anderen Ebenen unscharf gemacht haben Ebenen , aber die entsprechenden Ereignisse sind nicht deaktiviert. Natürlich können wir auch eine Maskenebene ohne Hintergrundfarbe hinzufügen und diese auf diese Weise abdecken Natürlich wird dies nicht der Fall sein Das zugrunde liegende Ereignis wird ausgelöst.