JS: Window-PopUp Ersatz mit Overlay durch CSS-/JS
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)
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)
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: <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">×</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)