1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

"erstelle eine Modalbox" häää?

Dieses Thema im Forum "Plauderboard" wurde erstellt von gericoach, 27. September 2015.

  1. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    Ich weiss, das ist off-topic und hat nix mit WP zu tun, aber eventuell kann/will jemand helfen:

    Ich arbeite an einer html5 Seite und brauche eine Modalbox. Hab entsprechenden Code gefunden, habe aber ein Vakuum zu folgedem Thema:
    Da steht:
    Wie ist das gemeint? Soll ich ne html Seite erstellen? Ich verstehe es nicht. Wenn ich den reinen Code (ohne header usw) in die Seite eingebe, wird er natürlich auch angezeigt... Kann einer von Euch mal helfen? Und bitte nicht den Kopf schütteln :)
     
    #1 gericoach, 27. September 2015
  2. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    2
    naja es ist ein bisschen ein vermurckstes html5,
    aber irgendwie möglich so....
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #2 Monika, 27. September 2015
  3. Brawler

    Brawler Gast

    Hallo,

    es gibt verschiedene Wege, ein modales Fenster einzubinden. Dein Beispiel ist hier eher nur ein Grundgerüst und ein Rahmen für eine Möglichkeit.

    Grundsätzlich wird das Modal selbst am Ende der HTML-Seite eingebunden. Wenn Du bspw. mit Bootstrap oder Foundation arbeitest, sind die Klassen dafür vorgegeben.

    Während das CSS für die Formatierung der Elemente im Modal sorgt, ist etwas JavaScript für die Interaktion notwendig (Öffnen, Schließen, Resize, etc.).

    In modernen Anwendungen wird der Code für das Modal nur in den Seiten integriert, in denen es auch benötigt wird. Komplexere Anforderungen erlauben auch die Erstellung zur Laufzeit - das erfolgt dann meist direkt über JavaScript/jQuery. Die ewige Performancediskussion...

    Wenn Du dynamische Inhalte in das Modal laden möchtest (bspw. ein PHP-Skript oder eine externe HTML-Seite), geht das relativ bequem mit jQuery (sychron/asynchron bleibt Dir überlassen).

    Du solltest also zunächst den DIV des Modals selbst am Ende der Seite einbetten. Ein display: none sorgt dann auch dafür, dass es nicht angezeigt wird. :)
     
    #3 Brawler, 27. September 2015
  4. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi geri,

    Ich hätte hier ein nettes Beispiel, auch wenn es für Bootstrap ist.
    Die verwendeten Anweisungen werden dort auch näher erklärt, warum und weshalb es so aufgebaut wird.
    http://www.w3schools.com/bootstrap/bootstrap_modal.asp

    Von deinem obigen Code ausgehend, würde ich hingehen und eine html Seite erstellen.
    Entsprechende jquery Scripteinbindung damit das ganze funktioniert natürlich vorrausgesetzt. ;)
     
    #4 Marcus[IS], 27. September 2015
  5. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    Ihr liegt komplett richtig: die Seite basiert auf bootstrap und html5. Ich habe gelesen, dass bootstrap ein eigenes Modal Feature mitbringt, konnte aber nicht erkennen, wie man es umsetzt.
    Der Code ist nur einer von vielen, die ich gefunden habe.
    Werde Eure Ansätze und Vorschläge analysieren. Waren sehr gute Beiträge, wofür ich Euch wirklich dankbar bin!!!
     
    #5 gericoach, 27. September 2015
  6. Brawler

    Brawler Gast

    Füge den Code hier vor den </body>-Tag ein:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Um das Modal zu öffnen (ohne JavaScript):

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn Du beim href eine Seite angibst, wird diese in das Modal geladen. Bitte beachte, dass es hier Unterschiede bei den BS-Versionen gibt.

    Oder per Button:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    JavaScript-Optionen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Events (Wichtig, wenn Du bspw. ein Video in einem Modal lädst):

    show.bs.modal
    shown.bs.modal
    hide.bs.modal
    hidden.bs.modal
    loaded.bs.modal

    Abfragebeispiel:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Für das Modal gibt es verschiedene CSS-Klassen, bspw. die Anzeigegröße. Die kannst Du aber den Cheatsheets entnehmen. :)
     
    #6 Brawler, 27. September 2015
  7. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    @Brawler: der modal effekt klappt leider nicht. Hab den Code unten eingesetzt und testweise ganz unten auf der frontseite den link gesetzt. Ne Idee was da falsch ist?
    URL: http://asia-lieferdienst.de/nexia/

    btw. nein, ich verdiene damit kein Geld, ist für meine "sister in law", also direkte familie! ;)
     
    #7 gericoach, 28. September 2015
    Zuletzt bearbeitet: 28. September 2015
  8. Brawler

    Brawler Gast

    #8 Brawler, 28. September 2015
  9. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    erledigt. Hab das komplette Paket genommen, die beiden .js, die im Paket lagen verlinkt. Ebenso die alte bootstrap.css ausgetauscht. passiert trotzdem nix. Was mache ich mit der config.json? wo muss die hin?
     
    #9 gericoach, 28. September 2015
  10. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    es wird langsam, das modalfenster kommt, verschwindet aber sofort wieder. Kennt wer dieses Phänomen?
     
    #10 gericoach, 28. September 2015
  11. chilidog

    chilidog Well-Known Member

    Registriert seit:
    17. Januar 2006
    Beiträge:
    1.147
    Zustimmungen:
    0
    AdBlocker / Pop-up Blocker aktiv?

    PS: Nö, daran lag es nicht.
     
    #11 chilidog, 28. September 2015
  12. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    wäre nicht das erste mal :) aber chrome reagiert genauso und der hat keinen adblocker.
     
    #12 gericoach, 28. September 2015
  13. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    Der Sourcecode sieht nun so aus:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #13 gericoach, 28. September 2015
  14. Brawler

    Brawler Gast

    Du hast auf der Seite jetzt 2 Modals eingebunden. Bitte entferne zur Prüfung eins.

    Weiterhin benötigt das Modal eine ID - die dann auch im href aufgerufen werden sollte (keine Klasse).

    Schau mal bei diesem Fiddle, das ist etwas übersichtlicher: http://jsfiddle.net/jschr/3kgbG/ Das Modal wird dabei per JavaScript geöffnet und die Funktion liefert dann ein Ergebnis zurück, welcher Button gedrückt wurde. :)

    Nachtrag: Du hast auch noch einen JS-Fehler auf der Seite.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Funktion ist nicht vorhanden. ;)
     
    #14 Brawler, 28. September 2015
    Zuletzt von einem Moderator bearbeitet: 28. September 2015
  15. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    Ich sitz davor wie ein Schwein vorm Uhrwerk...bin echt zu blöd dafür. Danke für Deine Mühe!!! Nun weiss ich auch, wieso das Email Formular nicht geht...das stand an Platz zwei hinter dem Modal Dingens.

    >> hab jetzt die codes aus dem fiddle umgesetzt, da passiert überhaupt nix mehr. ich verzweifel langsam...
    Hab den .js Code in eine Datei modal.js ausgelagert, die im header aufgerufen wird. dann den code unten eingesetzt und die style.css erweitert.
     
    #15 gericoach, 28. September 2015
    Zuletzt bearbeitet: 28. September 2015
  16. Brawler

    Brawler Gast

    Bootstrap setzt gewisse Dinge voraus... :)

    Stell bitte zuerst sicher, dass Du Bootstrap ordnungsgemäß in die Seite eingebunden hast. Streng nach Vorschrift. Inkludiere Deine eigenen Skripte und CSS danach. Mach das bitte alles erst einmal im header, verschieben kannst Du das später immer noch.

    Dann binde diesen Code am Ende der Seite ein (den Button kannst Du danach immer noch verschieben):

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das funktioniert so 100% - wenn Bootstrap korrekt eingebunden wurde.
     
    #16 Brawler, 28. September 2015
  17. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    ich liebe den title :lol::

    "gericoach macht ein Modal!"

    Werde morgen nochmal bei Null starten. Danke für den Code!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
     
    #17 gericoach, 28. September 2015
  18. gericoach

    gericoach Well-Known Member

    Registriert seit:
    12. August 2008
    Beiträge:
    7.193
    Zustimmungen:
    0
    @Brawler: Hey, Du hattest (wie zu erwarten war) komplett Recht!!!!!!!!!!!!!!!!! Habe den Original Bootstrap Code eingebaut und es läuft! DANKE,DANKE,DANKE!!!! Wenn Du mal Hilfe bei Layout/Design/Icons oder was auch immer brauchst: Here i am!
     
    #18 gericoach, 28. September 2015
    Zuletzt bearbeitet: 28. September 2015
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden