Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:bootstrap:snippets:meldefenster

Meldefenster


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

<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>

oder

<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>

Noch eine Version

https://jqueryui.com/dialog/#default

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>
Cookies helfen bei der Bereitstellung von Inhalten. Diese Website verwendet Cookies. Mit der Nutzung der Website erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Computer gespeichert werden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzerklärung gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren:bootstrap:snippets (71 views) · Zuletzt geändert: 15/06/2020 14:01 von conny