Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:bootstrap:snippets:meldefenster [30/04/2020 09:18] – conny
+++ programmieren:bootstrap:snippets:meldefenster [Unbekanntes Datum] (aktuell) – Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
@@ Zeile 3: / Zeile 3: @@
 Meldungen z.B. über dem Menü anzeigen:\\
 https://stackoverflow.com/questions/34279103/bootstrap-alert-on-top-of-navbar
+\\
 \\
 Schließen eines Meldefensters mit Cookie merken:\\
 https://www.codeply.com/p/azCmarhM9X/bootstrap-cookie-alert
 https://stackoverflow.com/questions/31446298/alert-bootstrap-with-cookie
+\\
+\\
+Nach einer gewissen Zeit von selbst schließen\\
+https://stackoverflow.com/questions/52018956/auto-hide-alert-above-navbar-in-bootstrap
+\\
+\\
+Nur Meldefenster
+<code>
+<div class="alert alert-danger alert-server" role="alert">
+  <button type="button" class="close" data-dismiss="alert">×</button>
+  <strong>Moving Servers</strong> You will experience some downtime as we move all of our files onto a new server. This move should be finished on 12/16.
+</div>
+</code>
+oder
+<code>
+<div class="fixed-bottom p-4">
+    <div class="toast bg-dark text-white w-100 mw-100" role="alert" data-autohide="false">
+        <div class="toast-body p-4 d-flex flex-column">
+            <h4>Cookie Warning</h4>
+            <p>
+            This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies.
+            </p>
+            <div class="ml-auto">
+                <button type="button" class="btn btn-outline-light mr-3" id="btnDeny">
+                    Deny
+                </button>
+                <button type="button" class="btn btn-light" id="btnAccept">
+                    Accept
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+</code>
+==== Noch eine Version ====
+https://jqueryui.com/dialog/#default\\
+<code php| download.php>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>jQuery UI Dialog - Default functionality</title>
+  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+  <link rel="stylesheet" href="/resources/demos/style.css">
+  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+  <script>
+  $( function() {
+    $( "#dialog" ).dialog();
+  } );
+  </script>
+</head>
+<body>
+<div id="dialog" title="Basic dialog">
+  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+</body>
+</html>
+</code>