So gestalten Sie ein Popup-Fenster mit JavaScript

Pop-ups sind eines der häufigsten interaktiven Elemente im modernen Webdesign. Sie können verwendet werden, um Benutzer aufzufordern, Inhalte anzuzeigen oder Benutzer bei der Ausführung von Vorgängen anzuleiten. Javascript ist eine unverzichtbare Sprache im modernen Webdesign. Popup-Fenster können mit Javascript gestaltet werden. Im Folgenden stellen wir vor, wie Sie Javascript zum Entwerfen von Popup-Fenstern verwenden.

1. HTML-Struktur

Das Popup-Fenster muss zunächst eine HTML-Struktur haben, die durch Auswahl von Tags wie div und section implementiert werden kann. Innerhalb dieses Tags können Sie den Inhalt hinzufügen, der angezeigt werden soll.

HTML-Struktur ist wie folgt:

<div class="dialog-box">
    <div class="dialog-content">这里填写需要展示的内容</div>
    <button class="close-btn">X</button>
</div>

2. CSS-Stil

Der CSS-Stil wird verwendet, um das Erscheinungsbild des Popup-Fensters zu definieren, wie z. B. Breite, Höhe, Positionierung usw . des Popup-Fensters. Darüber hinaus müssen Sie den Anfangszustand des Popup-Fensters auf den ausgeblendeten Zustand setzen.

Der CSS-Stil ist wie folgt:

.dialog-box{
    width: 400px;
    height: 300px;
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    display: none;
}
.dialog-content{
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}
.close-btn{
    position: absolute;
    top: 5px;
    right: 5px;
}

3. Javascript-Code

Nachdem die HTML-Struktur und der CSS-Stil des Popup-Fensters festgelegt wurden, können Sie Javascript verwenden, um das Popup-Fenster anzuzeigen und auszublenden.

Zuerst müssen Sie die Elemente des Popup-Fensters abrufen und die Anzeige- und Ausblendstile festlegen.

Der Javascript-Code lautet wie folgt:

var dialogBox = document.querySelector('.dialog-box');
var closeBtn = document.querySelector('.close-btn');

function showDialogBox(){
    dialogBox.style.display = 'block';
}
function hideDialogBox(){
    dialogBox.style.display = 'none';
}

Als nächstes müssen Sie Klickereignisse zur Schaltfläche „Öffnen“ und „Schließen“ des Popup-Fensters hinzufügen. Wenn der Benutzer auf diese Schaltflächen klickt, wird das Popup-Fenster geöffnet oder geschlossen entsprechend.

Der Javascript-Code lautet wie folgt:

var openBtn = document.querySelector('.open-btn');

openBtn.addEventListener('click',showDialogBox);
closeBtn.addEventListener('click',hideDialogBox);

Das Obige ist der grundlegende Prozess der Verwendung von Javascript zum Entwerfen von Popup-Fenstern. Bei der tatsächlichen Verwendung können wir den Code entsprechend den spezifischen Anforderungen hinzufügen und ändern, um komplexere und reichhaltigere Popup-Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonSo gestalten Sie ein Popup-Fenster mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!