CSS zum Erzielen eines Popup-Fensters oben und unten, links und rechts in der Mitte und eines transparenten Hintergrund-Sperrfenstereffekts

Es gibt eine einfache CSS-Methode, um das Popup-Fenster nach dem Klicken zu realisieren, es nach oben, unten, links und rechts zu zentrieren und eine graue transparente Maske hinzuzufügen, um das Fenster zu sperren und die Bildlaufleiste zu löschen

HTML Quelltext

<div Klasse="Box">
	<div Klasse="Boxen">
	    <!-- Weißes Popup-Fenster-->
	</div>
</div>

CSS Code

html, Text {
     Breite: 100 %;
     Höhe: 100%;
 }
 .Kasten {
     Anzeige: keine;
     Breite: 100 %;
     Höhe: 100%;
     Position: fest;
     links: 0;
     oben: 0;
     Hintergrundfarbe: RGBA (0,0,0,0,5);
 }
 .boxs {
     Breite: 400px;
     Höhe: 300px;
     Hintergrund: #fff;
     Kastenschatten: 1px 7px 18px 0px rgba (84, 115, 128, 0,11);
     Rahmenradius: 4px;
     Cursor: Zeiger;
     Position: absolut;
     links: 50%;
     oben: 50 %;
     Rand oben: -150px;
     Rand links: -200px;
 }

Durch die Verwendung von „position:fixed“ zum Fixieren von transparenten Hintergrundelementen kann das Fenster effektiv gesperrt werden, um ein Scrollen der Bildlaufleiste zu verhindern. Durch die Positionierung innerhalb des übergeordneten Elements können untergeordnete Elemente nach oben, unten, links und rechts zentriert werden. Was den Popup-Vorgang betrifft, müssen Sie das Klickereignis nur mit dem Anzeigeattribut des äußeren Div verknüpfen, das „none“ und „block“ ist.

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS das Popup-Fenster mit transparentem Hintergrund zentrieren und das Fenster sperren können. Weitere Informationen zum Zentrieren des Popup-Fensters mit transparentem Hintergrund und zum Sperren des Fensters finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!