mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 20.01.2022 02:55 Benutzername: Passwort: Auto-Login

Thema: Modal Box automatisch schließen vom 29.11.2021


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Modal Box automatisch schließen
Autor Nachricht
oakland-8
Threadersteller

Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: Männlich
Verfasst Mo 29.11.2021 13:55
Titel

Modal Box automatisch schließen

Antworten mit Zitat Zum Seitenanfang

Hallo allerseits,
ich habe auf einer Seite ein Popup (Modal Box) gesetzt, die ich allerdings per Javascript nach einigen Sekunden schließen lassen möchte. Da ich mich mit JS nicht auskenne (und es wahrscheinlich nur eines kleinen Eingriffs bedarf), deshalb hier der Code
Code:
 <div id="openModal" class="modalDialog">
              <div>
                <a href="#close" title="Close" class="close">x</a>
              </div>
         </div>

Und das JS:
Code:
$(document).ready(function() {
   $('.modalDialog').fadeIn();
   
    $('.close').on('click', function(event) {
        event.preventDefault();
       
        $('.modalDialog').fadeOut();
      
    setTimeout(function() {
      $('#openModal').modal('hide')},3000);
       
     });
});


Was kann (oder muss) ich tun, damit ich die Möglichkeit eines TimeOut hinbekomme?
  View user's profile Private Nachricht senden
l8rdude

Dabei seit: 30.07.2009
Ort: Nordhorn
Alter: -
Geschlecht: Männlich
Verfasst Mi 01.12.2021 10:55
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo!

Wenn du deinen Code besser setzt, wird schnell klar, wo das Problem liegt:

Code:
$(document).ready(function() {
    $('.modalDialog').fadeIn();

    $('.close').on('click', function(event) {
        event.preventDefault();
        $('.modalDialog').fadeOut();            // #1

        setTimeout(function() {
            $('#openModal').modal('hide')       // #2
        }, 3000);
    });
});


Dein Code besagt:
- wenn ich auf den Close Button drücke, soll das Modalfenster sofort ausfaden // #1
- ein Code nach 3 Sekunden ausgeführt werden, der ein Modalfenster sofort verstecken soll. // #2

Dabei fällt folgendes auf:
1. Du sprichst das Modalfenster mit unterschiedlichen Selektoren an, warum ist das so? Einmal schreibst du .modalDialog, im setTimeout beziehst du dich aber explizit nur auf #openModal. Ersteres spricht eventuell mehrere Elemente an, letzteres nur ein bestimmtes Element.
2. Du blendest ein Modalfenster bei Klick auf Schliessen sofort aus und lässt danach ein Modalfenster nach 3 Sekunden ausblenden. Das kann so nicht richtig sein.

Wenn dein Ziel ist, dass das Modalfenster automatisch x Sekunden nach Einblendung wieder ausgeblendet werden soll, kannst du folgendes schreiben:

Code:
$(document).ready(function() {
    $('.modalDialog').fadeIn({
       duration: 750,
       complete: function() {
         setTimeout(() => {
            $(this).fadeOut(500)
        }, 2000);
      }
    });
});


Demo hier: https://jsfiddle.net/9y07jtcu/1/

Gruss,


Zuletzt bearbeitet von l8rdude am Mi 01.12.2021 10:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
oakland-8
Threadersteller

Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: Männlich
Verfasst Mi 01.12.2021 11:17
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo l8rdude,
besten Dank für die Hinweise und den Link (der es sehr präzise darstellt).
Das ist das, wonach ich suchte.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Seite nach Sec. automatisch schließen
Alert Box kommt automatisch
Spezielle CD/DVD Box (Amaray-Box in CD größe)
select-box option aktiviert select-box
Aufklappbox - wieder schließen?
browser schließen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.