Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Popup / Modal ohne JS

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Popup / Modal ohne JS

    Hallo,
    ich möchte gerne das CSS Popup / Modal ohne JS nutzen, das es optisch auch gut ausschaut.
    Jetzt habe ich nur das Problem, as ich es in PHP einbette und ich nicht weiß, wie ich einen Wert (z.B. eine ID) an den DIV-Container weiterleiten soll.

    HTML-Code:
    <a class="button" href="#popup1?ID=1">Let me Pop up</a>
    "?ID=1" funktioniert hier leider nicht. Kann mir da jmd helfen?
    Danke.


  • #2
    Ich verstehe nur Bahnhof, der Code ist auch nicht gerade aussage Kräftig.

    Kommentar


    • #3
      Moin, Moin!

      Also komplett ohne JS wird sowas nicht funktionieren, da zumindest das entsprechende onclick-Event mit JS behandelt werden muss.
      Bsp.: https://www.w3schools.com/howto/howto_css_modals.asp

      Wenn es nur darum geht, dass du Parameter weitergeben willst, die du in das a-Tag platzieren möchtest, dann kannst du beispielsweise unter Verwendung von jQuery, jQueryUI und jQueryUI-Dialog dies bewerkstelligen. Wie gesagt JS brauchst du eh.

      https://jqueryui.com/dialog/

      Dann kannst du in das a-Tag ein data-Attribut hinzufügen.
      Bsp:
      HTML-Code:
        <a class="button" data-id="1" href="#">Let me Pop Up</a>
      In dem onclick-Handler kannst du den Parameter dann einfach an den Dialog weitergeben. Aber ansonsten poste Mal komplett die entsprechenden Abschnitte und sag dann nochmal, was du dann nicht im JS haben moechtest

      Kommentar


      • #4
        Der Code ist aussagekräftig und funktionieren tut so was auch.

        Man bedient sich dabei der Pseudoklasse :target.

        Beispiele, alle komplett ohne Javascript:
        https://www.webdesignerdepot.com/cdn...css3/demo.html
        https://www.cssscript.com/demo/minim...box-modalcss/#
        https://wiki.selfhtml.org/extensions...oltips.html#d1
        ->https://wiki.selfhtml.org/wiki/CSS/S...oklasse/target

        Die Basis stellt dabei der Fragmentidentifier #d1 mit zugehörigen DIV und gleichlautender id:
        Link zum Aufruf
        HTML-Code:
        <a href="#modal1">Link to #target</a>
        Div, das dann die eigentliche Modalbox darstellt:
        HTML-Code:
        <div id="modal1"></div>
        Wie das dann dargestellt wird, zum Beispiel,als overlay Vollbild oder als Tooltip Infobox mit Display:block bleibt jedem selbst überlassen.
        Code:
        /* CSS  */
        div#modal1:target {
            /* styles go here */
        }
        Crazynet

        Dein Fragment der URL ist schlecht gewählt
        href="#popup1?ID=1

        soll wohl eher so lauten
        href="#ID1

        Schau dir mal die Beispiele an die ich verlinkt habe.

        Ausgaben mit PHP erstellt du mit echo
        PHP-Code:
        $id = 'modal1';
        echo '<div id="' . <?= $id ?> . '"></div>';
        Hier wird der Variablen id der Wert modal1 zugewiesen, der dann an entsprechender Stelle im Markup ausgegeben wird.

        Kommentar


        • #5
          Vielen Dank für die vielen Antworten.
          Ich werde mir das im Laufe des Tages eute genau anschauen.

          Kommentar

          Lädt...
          X