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>
Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
programmieren:bootstrap:snippets (97 views) · Zuletzt geändert: 15/06/2020 14:01 von conny