JS: Window-PopUp Ersatz mit Overlay durch CSS-/JS

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Dienstag, 23. März 2021 um 11:01 Uhr (12/2021 Kalenderwoche)

geändert: Mittwoch, 18. Januar 2023 um 16:49 Uhr (3/2023 Kalenderwoche)

Keywords: ajax load jquery inkludieren include Enter abfangen Tastatur Eingaben open Window PopUp

Kategorien: HTML, JavaScript,

Text:

Im Bespiel-Quellcode sind zwei Dateien zu sehen.
Datei 1 ist die index.php und
Datei 2 zeigt die Datenbankausgabe mit Reaktion auf GET-Variablen.

Weitere Besonderheiten:
Im Suchfeld wird die Entertaste abgefangen und als Funktionsstart zur DB-Suche genutzt.
s. dazu Techdox: Tastatur-Eingaben abfangen mit JS

Ansonsten weitere Links zu Dialog-Boxen:

[Dialog-Box als HTML-Tag (auf developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?r...

accessible modal dialog (auf codepen.io)
Zur überarbeiteten Version "lokal" (mit laden einer anderen Datei)

Dialogfenster (auf kulturbanause.de)
Zur überarbeiteten Version "lokal" (mit laden einer anderen Datei)

[Exploring HTML dialog-element (auf greenroots.info)](https://blog.greenroots.info/exploring-html-lessdialoggreater-elem...


HTML dialog-Tag (auf w3docs.com)

Quellcode:   

######################################################
####### Start: "Datei 1" index.php ###################
######################################################
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;"/>
    <title>Konforst2</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0, 0, 0); /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }
            to {
                top: 0;
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }
            to {
                top: 0;
                opacity: 1
            }
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }
    </style>
    <script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Suche in DB mit JavaScript(Ajax)</h1>

<p>Vorlage hieß "Overlay_using_CSS-JS.html"</p>


<h2>Bitte einen Titel und den Key angeben </h2>
PopUp:&nbsp;<button id="myBtn">Titel-Suche öffnen...</button>

<br><br>
<form>

    Titel: <input type="text" name="feldTitel" id="feldTitel" placeholder="Titel eingeben"
                  onfocus="oeffneModalDialog();"><br>
    Key: <input type="text" name="feldId" id="feldId" placeholder="Id suchen" onfocus="oeffneModalDialog();"><br>
    <br>
    <button type="button" onclick="alert('Das ist nur ein Beispiel!!')">Speichern...</button>
</Form>
<!-- Trigger/Open The Modal -->

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Geben Sie einen Suchbegriff ein</h2>
        </div>
        <div class="modal-body">
            <form>
                Suche <input type="text" name="schnellsuche" id="schnellsuche" onchange="zeigeDbErgebnis();">
                <button type="button" onclick="zeigeDbErgebnis();">Suchen</button>
            </Form>
            <div id="platzhalter4Js" style="width:40em; padding:1em; border: 4px outset #007342;">
                <div style=" background-color:#DDD;">
                    <h2>Suche in der Datenbank...</h2>
                    <strong>Bitte haben Sie einen Moment Geduld.</strong>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <h3>Modal Footer</h3>
        </div>
    </div>

</div>

<script>

    $('#schnellsuche').keydown( function(e)
    {
        if(e.keyCode == 13)
        {
            //alert('Enter-Taste gedrückt');
            zeigeDbErgebnis();
            return false;//FALSE, damit der Enter nicht ausgeführt wird!
        }
    });

    //var ladeNeu;
    function zeigeDbErgebnis() {
        let schnellsuche = document.getElementById('schnellsuche').value;
        //alert('Suche mit "' + schnellsuche + '" gestartet');
        $(document).ready(function (x) {
            $.ajax({
                url: "/datenbankInhalt.php?feldrFuelln=feldTitel,feldId&schnellsuche=" + schnellsuche,
                success: function (result) {
                    $("#platzhalter4Js").html(result);
                }
            });
        });
        //jetzt einfach immer wieder aufrufen (alle 2 Sek.)
        //ladeNeu = window.setTimeout("zeigeDbErgebnis()", 2000);
    }//ENDE: function zeigeDbErgebnis()
    //Nach 3 Sekunden die Datei das erste Mal reinziehen, wenn vorhanden
    //ladeNeu = window.setTimeout("zeigeDbErgebnis()", 3000);

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function () {
        //alert('oeffneModalDialog()');
        oeffneModalDialog()
    }

    function oeffneModalDialog() {
        //alert('Angezeigt-01');
        modal.style.display = "block";
        window.setTimeout("zeigeDbErgebnis()", 1000);
    }//ENDE: function (...)

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        //alert('Schließe durch X!');
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            //alert('Schließe automatisch!');
            modal.style.display = "none";
        }
    }

    /**
     * Pumpt die DB-Daten in die beiden Felder
     *
     * @name       Funktion/Methode "datenUebernehmen()"
     * @author     Ralf von der Mark (vdM), Ref. 223 (Entwicklung), BLE <Ralf.vonderMark@BLE.de>
     * @copyright  2021, BLE
     * @version    18.03.2021, GIT: 1
     *
     * @param string  $ (Beschreibung)
     */
    function datenUebernehmen(feld1, wert1, feld2, wert2) {
        // alert('Start der Funktion "datenUebernehmen(feld1, wert1, feld2, wert2);"' +
        //     '\n\n => datenUebernehmen("' + feld1 + '", "' + wert1 + '", "' + feld2 + '", "' + wert2 + '")');
        if (wert1 == '' || wert2 == '') {
            alert('Daten fehlen!');
        } else {
            //Wenn obriges nicht zutrifft, dann...
            $nachfrage = confirm('Möchten Sie folgende Werte übernehmen?"' +
                '\n\n Feld[' + feld1 + '] => "' + wert1 + '"' +
                '\n  Feld[' + feld2 + '] => "' + wert2 + '"');
            if ($nachfrage == false) {
                //alert('nein');
            } else {
                //alert('Werte werden übernommen!');
                document.getElementById(feld1).value = wert1;
                document.getElementById(feld1).disabled = 'disabled';
                document.getElementById(feld1).style.width = '33em';
                document.getElementById(feld1).style.border = '2px outset green';
                document.getElementById(feld2).value = wert2;
                document.getElementById(feld2).disabled = 'disabled';
                document.getElementById(feld2).style.width = '33em';
                document.getElementById(feld2).style.border = '2px outset green';
                modal.style.display = "none";
                document.getElementById('myBtn').innerText = 'Werte erneut ändern...'
            }//ENDE: else ==> if ($nachfrage == false)
        }//ENDE: else ==> if (vn == '' || nn == '')

    }//ENDE: function datenUebernehmen(...)
</script>

</body>
</html>

######################################################
####### Start "Datei 2" DB-Ausgabe mit GET-Reaktion ##
######################################################
<?php
/**
 * Beispiel für Datenbank-Suche/-Ausgabe für PopUp-Simulation
 *
 * PHP version 7
 *
 * @name       datenbankInhalt.php
 *             mit Pfad: public\datenbankInhalt.php
 * @author     Ralf von der Mark (vdM), Ref. 223 (Entwicklung), BLE <Ralf.vonderMark@BLE.de>
 * @copyright  2021, BLE
 * @version    19.03.2021, GIT: Yes
 */

if (!empty($_GET['feldrFuelln'])) {
    $feldrFuellnArray = explode(',', $_GET['feldrFuelln']);
} else {
    $feldrFuellnArray = [];//Standardwert!
}//ENDE: else ==> if (!empty($_POST['schnellsuche']))
/* Dynamischer-Kommentar: Ersten Schraegen (/) der beiden wegloeschen bzw. hinschreiben!
echo '<br>$_GET[feldrFuelln]: '.$_GET['feldrFuelln'].'<pre>$feldrFuellnArray: '.print_r($feldrFuellnArray, true).'</pre><hr>';//*/
if (count($feldrFuellnArray) != 2) {
    exit('<h1>Parameter fehlen!</h1>');
}//ENDE: if (count($feldrFuellnArray) != 2)

if (!empty($_GET['schnellsuche'])) {
    $schnellsuche = 'AND group_titel LIKE "%'.strip_tags($_GET['schnellsuche']).'%"';
} else {
    $schnellsuche = null;//Standardwert!
}//ENDE: else ==> if (!empty($_POST['schnellsuche']))

define('DB_HOST_RMS', 'rms.dev.db.ble.de');
define('DB_NAME_RMS', 'rms');
define('DB_USER_RMS', 'rms');
define('DB_PASSWORD_RMS', 'ifNYkA9I2svvVxpaDxw0');
define('DB_CHARSET_RMS', 'utf8');

/** @abstract DB-Verbindung */
function dbRmsVerbinder($ohneSetNames = NULL)
{
    //Standard-MySQLi-Aufruf
    $db_link = mysqli_connect(DB_HOST_RMS, DB_USER_RMS, DB_PASSWORD_RMS, DB_NAME_RMS)
    or die('<br>
                                   <br>
                                   <br>
                                   <h2 style="color:#990000;">
                                       ERROR! Die Anwendung kann keine Verbindung zur Datenbank herstellen! (Code: 0815)
                                       <br>
                                       (HOST: '.DB_HOST_RMS
        .', DB: '.DB_NAME_RMS
        .', USER: '.DB_USER_RMS
        .')</h2>');
    mysqli_query($db_link, "SET NAMES '".DB_CHARSET_RMS."'");
    return $db_link;
}//ENDE: function dbRmsVerbinder()
$link = dbRmsVerbinder();
$query = '
    SELECT group_id, group_titel, group_sortg, group_update
    FROM rms.anmldg_veran_gruppe
    WHERE group_id > 0
    '.$schnellsuche.'
    ORDER BY group_sortg ASC
';
$result = mysqli_query($link, $query);
$trefferAnz = mysqli_num_rows($result);
if ($trefferAnz == 0) {
    echo '<h2>Nichts gefunden!</h2>';
} else {
    //Wenn obriges nicht zutrifft, dann...
    while ($datnsatz = mysqli_fetch_assoc($result)) {
        /* Dynamischer-Kommentar: Ersten Schraegen (/) der beiden wegloeschen bzw. hinschreiben!
        echo '<br><pre>datnsatz: '.print_r($datnsatz, true).'</pre><hr>';//*/
        echo '
            <br>
             - <a onclick="datenUebernehmen(\''.$feldrFuellnArray[0].'\', \''.$datnsatz['group_titel'].'\', \''.$feldrFuellnArray[1].'\', \''.$datnsatz['group_id'].'\');"
                  style="cursor: pointer;">'.$datnsatz['group_titel'].' (#'.$datnsatz['group_id'].')</a>';
    }//ENDE: while
}//ENDE: else ==> if ($trefferAnz == 0)