InternInhaltsverzeichnisGlossarBausteineLinklisteTutorialsKommentare

Thema: CSS - Modal-Fenster mit HTML5 und CSS3 Artikel anzeigen

Tommy ✶✶✶✶✶ schrieb am Montag, den 10 Dezember 2018 #1
Vielen Dank für diese Modal Lösung 👍

Ich habe sie beispielhaft in die Software "Mobirise" hier eingebaut:

mobirise-tutorials.com/L[…]Modal.html

Leider benötigt Mobirise immer noch zusätzlich ein JavaScript um Anker anzusprechen, da die Seite dafür neu geladen werden muss.
Werner schrieb am Montag, den 10 Dezember 2018 #2
Du bist der beste, hast sogar eine Lösung mit JavaScript gefunden. Und das ganze wurde sehr schön umgesetzt und nicht nur kopiert 👍
Burkhard Schüren ✶✶✶✶✶ schrieb am Montag, den 11 Januar 2021 #3
Vielen Dank, Das hat mir sehr geholfen.
ChrisP ✶✶✶✶✶ schrieb am Donnerstag, den 25 März 2021 #4
Hallo,
Ich mache gerade erste Erfahrungen mit CSS und finde dieses Modal wirklich gut. Leider habe ich ein Problem: Meine Seite funktioniert mit dem Modal in Android Chromeund Desktop überall hervorragend.
Im IOS Safari stürzt die komplette Seite jedoch ab und lädt garnicht.
Ich konnte das Problem auf das Position:fixed begrenzen. Mit alternativen Position funktioniert es aber sieht sehr bescheiden aus und zerstört das gesamte Layout.
Meine bisherige Recherche hat mir noch nicht weiter geholfen.
Gibt es eine Alternative bzw. Anpassung hierzu, damit es in ios Safari identisch aussieht und funktioniert?
Viele Grüße, Chris
Werner schrieb am Freitag, den 26 März 2021 #5
Ich muss ehrlich sagen das ich mit dieser Funktion nicht 100% zufrieden bin, weil immer ein interner Link (#close) beim Schließen des Modals gesetzt wird.

Wie wäre es, anstatt mit diesen Modal, auf das Dialog -Element zu setzen, dafür ist JavaScript notwendig, um das Element wieder zu schließen » werner-zenk.de/html/html_dialog.php
Florian ✶✶✶✶✶ schrieb am Mittwoch, den 6 April 2022 #6
Danke - Verzögerungsfunktion funktioniert wunderbar gibt es irgendwie eine Methode das wenn einmal das Fenster gezeigt wurde bei Rückkehr später in die Seite nicht mehr angezeigt wird?

Gruß
Florian
Werner schrieb am Donnerstag, den 7 April 2022 #7
Das funktioniert nur über Cookies - Folgendes Script kann man sich dann nach seinen Wünschen umbauen: » werner-zenk.de/javascript/datenschutz-hinweis_ueber_cookies_ausblenden.php
sebadja schrieb am Samstag, den 1 April 2023 #8
Hallo
Super script. Ich habe nur ein Problem: Als Neuling weiss ich nie genau was wo hingehört, also ins Head, vor dem head etc. Es wäre sehr lernreich wenn diese Angaben dabei wären.

Frage: Wie kann ich das Fenster automatisch schlissen lassen, z.B nach 10 sec.

Vielen Dank Ingo
Werner schrieb am Samstag, den 1 April 2023 #9
Hallo,
Fenster automatisch nach 10 Sekunden schließen:

1
2
3
4
5
6
7
8
9
<script>
setTimeout(function() { 
 window.location.href="#close";

}, 10000); // Verzögerung in Millisekunden
</script>

</body>
</html>
sebadja schrieb am Samstag, den 1 April 2023 #10
Hallo
Super vielen Dank.
Ich kann das Fenster nicht versetzen. Entweder ist es ganz oben
<style>
.modalDialog {
position: Fixed;
font-family: Verdana, Sans-Serif;
top: 0; <<<<<<<<
right: 0;

oder es ist fast ganz unten:
<style>
.modalDialog {
position: Fixed;
font-family: Verdana, Sans-Serif;
top: 10; <<<<<<<<
right: 0;

Was mache ich falsch.
Vielen Dank Ingo