Erstellen Sie ein benutzerdefiniertes Warnfeld in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Erstellen Sie ein benutzerdefiniertes …
Habdul Hazeez 15 Februar 2024
JavaScript JavaScript Alert Box
  1. Erstellen Sie ein benutzerdefiniertes Warnfeld mit der jQuery-Benutzeroberfläche
  2. Erstellen Sie mit SweetAlert2 eine benutzerdefinierte Benachrichtigungsbox
  3. Erstellen Sie ein benutzerdefiniertes Warnfeld mit einer benutzerdefinierten Funktion
Erstellen Sie ein benutzerdefiniertes Warnfeld in JavaScript

In diesem Artikel erfahren Sie, wie Sie mit jQuery UI, SweetAlert2 und einer benutzerdefinierten Warnfunktion ein benutzerdefiniertes Warnfeld in JavaScript erstellen.

Erstellen Sie ein benutzerdefiniertes Warnfeld mit der jQuery-Benutzeroberfläche

Sie können jQuery UI verwenden, um die Funktionalität der JavaScript-nativen alert()-Funktion nachzuahmen. Obwohl die jQuery-Benutzeroberfläche viele APIs hat, können Sie ihre dialog()-API verwenden, um ein benutzerdefiniertes Warnfeld zu erstellen.

Im Gegensatz zur nativen JavaScript-nativen alert()-Funktion können Sie das mit der dialog()-API erstellte Warnfeld ziehen.

Wir haben jQuery, jQuery UI und die CSS-Stile für jQuery UI in unseren Code im folgenden Codeblock importiert. Daher können wir die dialog()-API verwenden, um die benutzerdefinierte Warnbox zu erstellen.

In der Zwischenzeit benötigt die dialog()-API einen Ort auf der Webseite, an dem das benutzerdefinierte Warnfeld angezeigt wird. Wir verwenden also ein HTML-Div-Element mit einer eindeutigen ID.

Darüber hinaus sollte dieses div ein title-Attribut haben, das Text enthält, der der Titel des benutzerdefinierten Warnfelds sein wird. Wenn Sie den Code in Ihrem Webbrowser ausführen, sehen Sie das benutzerdefinierte Warnfeld, das mit der dialog()-API erstellt wurde.

Code:

<head>
    <meta charset="utf-8">
    <title>Customized alert box with jQueryUI</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#jquery-ui-dialog").dialog();
        });
    </script>
</head>
<body>
    <main style="display: flex; justify-content: center;">
        <div id="jquery-ui-dialog" title="A dialog">
            <p>You can move this dialog box, or close it with the 'X' sign at the top-right.</p>
        </div>
    </main>
</body>

Ausgang:

Angepasstes Warnfenster mit jQueryUI

Erstellen Sie mit SweetAlert2 eine benutzerdefinierte Benachrichtigungsbox

SweetAlert2 ermöglicht es Ihnen, ein Benachrichtigungsfeld zu erstellen, das zugänglich, anpassbar und reaktionsschnell ist. Es zielt darauf ab, JavaScript-Popup-Boxen zu ersetzen, einschließlich der nativen JavaScript-Funktion alert().

Sie können SweetAlert2 auf verschiedene Arten in Ihrem Projekt verwenden. Für diesen Artikel verwenden wir es jedoch mit dem Tag <script> über ein Content Delivery Network (CDN).

Wenn SweetAlert2 heruntergeladen wird, können Sie es daher verwenden, indem Sie einen Ereignis-Listener an eine HTML-Schaltfläche anhängen. Sie können die Methode Swal.fire() aufrufen und im Event-Listener mit Argumenten versorgen.

Das Argument, das Sie an Swal.fire() übergeben, bestimmt die Ausgabe des benutzerdefinierten Warnfelds.

Wir haben im nächsten Codeblock einen Ereignis-Listener an eine HTML-Schaltfläche angehängt. Diese Schaltfläche hat ein HTML-ID-Attribut von #showAlert.

Wir haben jQuery verwendet, um die ID abzurufen, um Ihnen die Arbeit zu erleichtern. Danach rufen wir die Methode Swal.fire() mit Argumenten auf, die eine benutzerdefinierte Warnung anzeigt.

Code:

<head>
    <meta charset="utf-8">
    <title>Customized alert box with SweetAlert2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
    <style type="text/css">
        button {
            padding: 1em;
            background-color: #1560bd;
            color: #ffffff;
            border-radius: 0.2em;
            border-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <main>
        <button id="showAlert">Click Me</button>
    </main>
</body>
<script>
    $("#showAlert").click(function(){
        Swal.fire(
            'Are you done?',
        )
    });
</script>

Ausgang:

Benutzerdefiniertes Benachrichtigungsfeld mit Sweetalert2

Erstellen Sie ein benutzerdefiniertes Warnfeld mit einer benutzerdefinierten Funktion

Sie können eine benutzerdefinierte Funktion erstellen, die das native alert()-Feld im Webbrowser des Benutzers ersetzt. Sie tun dies über das Objekt window, und die benutzerdefinierte Funktion funktioniert wie folgt:

  1. Legen Sie Konstanten für den Alarmtitel und den Text der Alarmschaltfläche fest.
  2. Prüfen Sie, ob ein HTML die ID alert_container hat. Wenn wahr, stoppen Sie die Erstellung der benutzerdefinierten Warnung.
  3. Erstellen Sie das div-Element für den Alert-Container und hängen Sie es an das body-Element an. Gehen Sie danach wie folgt vor:
    • Geben Sie dem Alert-Container eine HTML-ID.
    • Geben Sie dem Alert-Container einen HTML-Klassennamen.
  4. Erstellen Sie ein div-Element für das Warnfeld und hängen Sie es an den Warncontainer an. Geben Sie ihr anschließend einen HTML-Klassennamen.
  5. Stellen Sie mit scrollTop die oberste Position der Alertbox ein.
  6. Stellen Sie mit scrollWidth und offsetWidth die linke Position der Alertbox ein.
  7. Erstellen Sie ein HTML-Element h1 für den Alarmtitel. Gehen Sie dann wie folgt vor:
    • Erstellen Sie einen Textknoten für den Warnungstitel. Sein Wert sollte die Titelkonstante der Warnung sein.
    • Hängen Sie das h1 an das Alert-Feld an.
    • Hängen Sie den Textknoten an den Warnungstitel an.
  8. Erstellen Sie das HTML-Element button. Gehen Sie dann wie folgt vor:
    • Erstellen Sie einen Textknoten für den Schaltflächentext. Sein Wert sollte die Titelkonstante der Warnung sein.
    • Hängen Sie den Schaltflächentext an das Element Schaltfläche an.
    • Fügen Sie das Element Schaltfläche an das Warnfeld an.
    • Weisen Sie dem button-Element einen eindeutigen Klassennamen zu.
    • Hängen Sie einen Ereignis-Listener an die Schaltfläche an. Der Ereignis-Listener sollte das benutzerdefinierte Warnfeld schließen.

Außerdem sollten Sie eine Funktion erstellen, die die benutzerdefinierte Warnung entfernt. Dies sollte passieren, wenn der Benutzer auf die Schaltfläche OK klickt.

Die Funktion sollte die folgenden Schritte verwenden:

  1. Holen Sie sich das HTML-Element body.
  2. Rufen Sie den Alert-Container ab.
  3. Verwenden Sie die Methode removeChild, um den Alert-Container aus dem HTML-Element body zu entfernen.

Erstellen Sie schließlich CSS-Stile, um die benutzerdefinierte Warnfunktion zu gestalten. In den nachfolgenden Codeblöcken finden Sie die Implementierung für Folgendes:

  1. Die benutzerdefinierte Benachrichtigungsfunktion
  2. Die Funktion, die es entfernt
  3. Die CSS-Stile für die benutzerdefinierte Warnfunktion

HTML- und JavaScript-Code:

<body>
    <input type="button" value = "Say Hello" onclick="alert('Hello');" />
</body>
<script>
    // Ensure the user's web browser can run
    // JavaScript before creating the custom
    // alert box
    if (document.getElementById) {
        // Swap the native alert for the custom
        // alert
        window.alert = function (alert_message) {
            custom_alert(alert_message);
        }
    }

    function custom_alert(alert_message) {

        /* You can utilize the web page address
         * for the alert message by doing the following:

         const ALERT_TITLE = "The page at " + document.location.href + " says: ";
         */
        const ALERT_TITLE = "Alert Message";
        const ALERT_BUTTON_TEXT = "OK";

        // Check if there is an HTML element with
        // an ID of "alert_container".If true, abort
        // the creation of the custom alert.
        let is_alert_container_exist = document.getElementById("alert_container");
        if (is_alert_container_exist) {
            return;
        }

        // Create a div to serve as the alert
        // container. Afterward, attach it to the body
        // element.
        let get_body_element = document.querySelector("body");
        let div_for_alert_container = document.createElement("div");
        let alert_container = get_body_element.appendChild(div_for_alert_container);

        // Add an HTML ID and a class name for the
        // alert container
        alert_container.id = "alert_container";
        alert_container.className = "alert_container"

        // Create the div for the alert_box and attach
        // it to the alert container.
        let div_for_alert_box = document.createElement("div")
        let alert_box = alert_container.appendChild(div_for_alert_box);
        alert_box.className = "alert_box";

        // Set the position of the alert box using
        // scrollTop, scrollWidth, and offsetWidth
        alert_box.style.top = document.documentElement.scrollTop + "px";
        alert_box.style.left = (document.documentElement.scrollWidth - alert_box.offsetWidth) / 2 + "px";

        // Create h1 to hold the alert title
        let alert_header_tag = document.createElement("h1");
        let alert_title_text = document.createTextNode(ALERT_TITLE)
        let alert_title= alert_box.appendChild(alert_header_tag);
        alert_title.appendChild(alert_title_text);

        // Create a paragraph element to hold the
        // alert message
        let alert_paragraph_tag = document.createElement("p");
        let alert_message_container = alert_box.appendChild(alert_paragraph_tag);
        alert_message_container.textContent = alert_message;

        // Create the OK button
        let ok_button_tag = document.createElement("button");
        let ok_button_text = document.createTextNode(ALERT_BUTTON_TEXT)
        let ok_button = alert_box.appendChild(ok_button_tag);
        ok_button.className = "close_btn";
        ok_button.appendChild(ok_button_text);

        // Add an event listener that'll close the
        // custom alert
        ok_button.addEventListener("click", function () {
            remove_custom_alert();
        }, false);
    }

    function remove_custom_alert() {
        let HTML_body = document.querySelector("body");
        let alert_container = document.getElementById("alert_container");
        HTML_body.removeChild(alert_container);
    }
</script>

CSS-Code:

.alert_container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #0000004d;
}

.alert_box {
    position: relative;
    width: 300px;
    min-height: 100px;
    margin-top: 50px;
    border: 1px solid #666;
    background-color: #fff;
}

.alert_box h1 {
    font-size: 0.9em;
    margin: 0;
    background-color: #1560bd;
    color: #fff;
    border-bottom: 1px solid #000;
    padding: 2px 0 2px 5px;
}

.alert_box p {
    font-size: 0.7em;
    height: 50px;
    margin-left: 55px;
    padding-left: 5px;
}

.close_btn {
    width: 70px;
    font-size: 0.7em;
    display: block;
    margin: 5px auto;
    padding: 7px;
    border: 0;
    color: #fff;
    background-color: #1560bd;
    border-radius: 3px;
    cursor: pointer;
}

Ausgang:

Benutzerdefiniertes Warnfeld mit benutzerdefinierter Funktion

Autor: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn