Wie kann man eine modale Dialogbox mit CSS und JavaScript erstellen
Heutzutage ist eines der interessanten Dinge in der Programmierwelt der modale Dialog. Ein modaler Dialog oder eine Popup-Box wird verwendet, um die zuletzt aktualisierte Webseite anzuzeigen. Es lenkt die Aufmerksamkeit des Benutzers auf ein bestimmtes Element.
Der größte Vorteil des modalen Dialogs besteht darin, dass er zusätzliche Informationen anzeigt und die Seite nicht erneut lädt. Es stellt den Benutzern die relevanten Informationen in das Dialogfenster auf einer ähnlichen Webseite zur Verfügung.
Ein weiterer Vorteil, der einen modalen Dialog nahelegt, ist, dass sie die Ladezeiten verkürzen und so die Benutzer anziehen.
Nun, da wir erfahren, was ein Modal-Dialog ist, lassen Sie uns sehen, wie wir ihn erstellen können.
Es gibt verschiedene Möglichkeiten, einen modalen Dialog mit HTML, CSS und JavaScript zu erstellen.
Fangen wir mit der Erstellung unseres Codes Schritt für Schritt an!
1. HTML erstellen
Erstellen Sie ein Tag <div> mit id=“example”. Beliebiger Inhalt in diesem Bereich wird vom Browser ausgeblendet und bei Aktivierung angezeigt. Alle darunter liegenden Inhalte sind für den Beutzer “nicht anklickbar”.
Platzieren Sie in #example ein anderes Tag <div>, um ein Dialogfeld zu erstellen. Es enthält die Inhalte, die wir dem Benutzer zeigen wollen.
<div id="example">
<div>
<p>Jeder beliebige Inhalt, den Sie dem Benutzer zeigen möchten.</p>
</div>
</div>2. CSS einfügen
Der zweite Schritt ist, unsere ID mit CSS-Eigenschaften zu gestalten.
#example {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}Dann stellen Sie einen Style auf die innere Div ein und machen Sie ihn horizontal für einen Dialogbox-Effekt.
#example div {
width:350px;
height: 80px;
margin: 100px auto;
background-color: #f2f2f2;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:1px solid #666666;
padding:15px;
text-align:center;
font-weight: bold;
font-size: 15px;
border: 3px solid #cccccc;
position: absolute;
left: 50%;
top: 100px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}Für maximale Browser-Kompatibilität werden Erweiterungen wie -Webkit- für Safari, Google Chrome und Opera (neuere Versionen), -ms- für Internet Explorer und -Moz- für Firefox mit den Eigenschaften border-radius und transform verwendet.
Stellen Sie auch die Eigenschaften height, margin, padding und font-family ein.
body {
height:100%;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}3. JavaScript einfügen
Der letzte Schritt ist das Hinzufügen von JavaScript in unserem Code.
Wir können die Funktion entweder im Tag <head> unseres Dokuments oder in einer externen .js-Datei hinzufügen.
function example() {
el = document.getElementById("example");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}Wir verwenden eine automatische Umschaltmethode, um es sichtbar zu machen, wenn es ausgeblendet ist.
Wir sollen folgendes auf unserer Seite hinzufügen, damit, wenn der Benutzer auf den Link klickt, unsere Box angezeigt wird.
<a href='#' onclick=example()'>open</a>In HTML müssen wir einen Link hinzufügen, um es auszublenden:
<a href='#' onclick=example()'>Klicken Sie hier, um die Box zu schließen</a>Hier ist das Ergebnis unseres Codes:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
height:100%;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-size: 20px;
color: #000000;
}
#example {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#example div {
width:350px;
height: 80px;
margin: 100px auto;
background-color: #f2f2f2;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:1px solid #666666;
padding:15px;
text-align:center;
font-weight: bold;
font-size: 15px;
border: 3px solid #cccccc;
position: absolute;
left: 50%;
top: 100px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Modale Box erstellen</h2>
<a href='#' onclick='example()'>open</a>
<div id="example">
<div>
<p>Die Inhalte, die der Benutzer sehen soll, gehen hierhin.</p>
<a href='#' onclick='example()'>Um die Box zu schließen, klicken Sie hier</a>
</div>
<script>
function example() {
el = document.getElementById("example");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</div>
</body>
</html>Lassen Sie ein anderes Beispiel für modale Dialogbox betrachten:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #cccccc;
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #eeeeee;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 30px;
background-color: #eeeeee;
}
.close-button:hover {
background-color: #adadad;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
</style>
</head>
<body>
<h2>Create Modal Box</h2>
<button class="example">Klicken Sie hier, um modal zu sehen!</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h2>Das ist ein Modal</h2>
</div>
</div>
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".example");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
</body>
</html>Wir können auch ein modales Popup mit CSS3 erstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: -moz-linear-gradient(#2edbe8, #01a6b2);
background: -webkit-linear-gradient(#2edbe8, #01a6b2);
background: -o-linear-gradient(#2edbe8, #01a6b2);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #6ed1d8; }
</style>
</head>
<body>
<h2>Modale Box erstellen</h2>
<a href="#openModal">Box</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Modale Box </h2>
<p>Diese modale Box wurde mit CSS3 erstellt.</p>
</div>
<a href="#close" title="Close" class="close">x</a>
</div>
</body>
</html>