 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
oakland-8
Threadersteller
Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: 
|
Verfasst Mo 29.11.2021 14:55
Titel Modal Box automatisch schließen |
  |
|
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?
|
|
| |
  |
 |
l8rdude
Dabei seit: 30.07.2009
Ort: Nordhorn
Alter: -
Geschlecht:
|
Verfasst Mi 01.12.2021 11:55
Titel
|
|
|
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 11:56, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
oakland-8
Threadersteller
Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht:
|
Verfasst Mi 01.12.2021 12:17
Titel
|
|
|
Hallo l8rdude,
besten Dank für die Hinweise und den Link (der es sehr präzise darstellt).
Das ist das, wonach ich suchte.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Seite nach Sec. automatisch schließen
browser schließen
swf-files mit javascript schließen
[c4d] polygone schließen in xl7 release?
Photoshop > Auswahl schließen
Aufklappbox - wieder schließen?
|
|
|
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.
|
|
