Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS Modal Popup einblenden wenn JavaScript deaktiviert ist

Einklappen

Neue Werbung 2019

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

  • [Erledigt] CSS Modal Popup einblenden wenn JavaScript deaktiviert ist

    Guten morgen Leute...

    Ich habe mehrere Formulare die mit JavaScript validiert werden. Nach Absprache mit meinem Chef haben wir uns darauf geeinigt bei deaktiviertem JS eine Meldung für den User auszugeben
    "Bitte aktivieren Sie Ihr JavaScript oder wenden Sie sich an unser Kundencenter."

    Um das ganze etwas netter zu gestalten möchte ich ein Modal dafür verwenden.
    Dazu habe ich folgendes Snippet verwendet: http://codepen.io/dsheiko/pen/jCcld

    Das habe ich mir so weit angepasst, dass bei deaktivierten JS das Modal aufgerufen wird.


    Jedoch besteht jetzt das Problem das dieses immer neu geladen wird.

    Hier mein Code,
    das ist in mein Head-Bereich:
    HTML-Code:
    <link rel="stylesheet" href="./css/nojs-modal.css">
    <noscript>
           <meta http-equiv="refresh" content="20;url=<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '#about'; ?>" />            
    </noscript>
    das ist der Container für das Modal
    HTML-Code:
    <div class="modal-js">
                     <span id="start" class="target"><!-- Hidden anchor to close all modals --></span>
                     <span id="about" class="target"><!-- Hidden anchor to open adjesting modal container--></span>
             <div class="content vertical-align-middle">
                     <h2>About</h2>
                     <article>Lorem ipsum</article>
                     <a class="close-btn" href="#start">X</a>
             </div>
    </div>
    Ich habe bereits herausgefunden:
    HTML-Code:
    <meta http-equiv="refresh" content="20;url=<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '#about'; ?>" />          
    http-equiv='refresh' steht dafür das deie Seite aktualisiert wird, content='20;....' für die Zeitspanne (20 Sekunden).
    Dann gibt es laut W3C für http-equiv noch default-style und content-type, beide aber ungeeignet für mein Vorhaben.

    Bin ich mit diesem Ansatz auf dem richtigem Weg oder sollte ich meine Herangehensweise noch einmal überdenken?

  • #2
    Wo ist das Problem, wenn JavaScript nicht aktiv ist? Eine serverseitige Validierung ersparst du dir so oder so nicht.

    Kommentar


    • #3
      Mit PHP hat ein "css modal popup" nichts zu tun.

      [MOD: Verschoben von PHP-Einsteiger]
      The string "()()" is not palindrom but the String "())(" is.

      Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
      PHP.de Wissenssammlung | Kein Support per PN

      Kommentar


      • #4
        Sorry hausl,
        hab ich übersehen...

        hellbringer, wieso erspare ich mir die Server seitige Validierung damit nicht? Warum sollte ich doppelt validieren?
        Vieleicht verstehe ich ja auch grade nur nicht wie du das meinst.

        Kommentar


        • #5
          Warum sollte ich doppelt validieren?
          Daher am besten gleich am Server validieren, alles andere kann man umgehen. JS-Validierung ist so ein "usability nice to have", aber halt keine ernsthafte Prüfung. Sieh es so: Über alles was im Client-Browser passiert hast du keine Kontrolle, über alles was am/zum Server reinkommt hingegen, hast du volle Kontrolle.
          The string "()()" is not palindrom but the String "())(" is.

          Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
          PHP.de Wissenssammlung | Kein Support per PN

          Kommentar


          • #6
            Ja ok. Ich werde mein Konzept nochmal überdenken...

            Würde das Problem trotzdem gerne lösen. Dann war der Thread nicht ganz umsonst

            Kommentar


            • #7
              Schellschussgedanke ... Gibt den Modal-Container direkt in die noscript Tags vielleicht?! Wie auch immer .. nicht vergessen, HTML, CSS, JS läuft im Browser, was der da "bekommt" ist im Quelltext zu sehen, alles andere (PHP) ist da schon erledigt und vorbei.
              The string "()()" is not palindrom but the String "())(" is.

              Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
              PHP.de Wissenssammlung | Kein Support per PN

              Kommentar


              • #8
                Ich schreib irgendwas von wegen deaktivierten js in den parent view einer seite, welcher ja bei aktivierten js sowieso überschrieben wird.

                Kommentar


                • #9
                  Hallo meta01,

                  könntest du das bitte etwas genauer erläutern. Versteh grad nicht so ganz worauf du hinaus willst...

                  Kommentar


                  • #10
                    Vermute meta01 meint ein <div> oder was ähnliches mit dem Inhalt "bitte aktivieren Sie Javascript ...", was bei aktiven Javascript durch ein entsprechendes Script ausgeblendet wird.
                    Wenn javascript nicht aktiv ist, bleibt der Inhalt sichtbar.
                    <noscript> ist einfacher und reicht für so was im Normalfall.

                    Edit: Sehe soeben, hast ja oben schon noscript benutzt.
                    Edit 2: Nach nochmaligen Lesen des Threads verstehe ich noch nicht so richtig, wo das Problem liegt. Kann dies
                    Mit PHP prüfen ob JavaScript im Client aktiviert ist
                    für dich interessant sein?

                    Kommentar


                    • #11
                      hallo jspit,

                      ja habe das noscript-tag schon verwendet. Jedoch bekomme ich es im Moment nicht hin es bei deaktivierten js automatisch aufzurufen.

                      http-equiv='Refresh' content='1' geht zwar, wird aber nach einer Sekunde aktualisiert.
                      über PHP mit header('Location: #about') geht auch nicht. (ich denk mal weil die Seite auf sich selbst verlinkt, errorcode: "ERR_TOO_MANY_REDIRECTS"

                      Ich werde jetzt versuchen

                      Code:
                      $('#noscript_div').hide();
                              $(document).ready(function(event)){
                      };
                      es so zu lösen...

                      Danke für eure Tips...

                      Kommentar


                      • #12
                        Blende im <noscirpt>..</noscript> doch einfach sowas ein: http://jsfiddle.net/GG9Sa/2395/

                        Hier das original, da kann man die modal noch ein und ausschalten: http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/ hab das oben einfach mal derb rausgeschmissen und css etwas angepasst. Benutzerfreundlich ist halt anders.
                        The string "()()" is not palindrom but the String "())(" is.

                        Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                        PHP.de Wissenssammlung | Kein Support per PN

                        Kommentar


                        • #13
                          ja jspit.

                          ich setzte noscript prinzipiell nur dann, wenn es um Content geht, welcher sonst per js generiert wird.
                          Es dreht sich auch nicht um ausblenden, sondern um das überschreiben:
                          "Mit aktiviertem js könnten sie jetzt die Reuters Ticker Meldungen sehen, welche wir über die Reuters Ticker Api für sie einbinden."
                          Ein ReutersTickerApiView überschreibt hier, ein noscript Block versucht ähnliche Funktionalität ohne die Restful Reuters Ticker ApI zu generieren.

                          z9minimal :
                          Bei dem Code oben fehlt die schliesende Klammer.
                          Ein noscript block brauchst Du nicht zu verstecken, siehe hausl .



                          Kommentar


                          • #14
                            du meta,

                            du meinst bestimmt das snippet aus #11, oder? Das wäre mein alternativer weg geworden ohne <noscript>....</noscript>, dafür mit <div id='noscript_div'>.
                            Verstanden was ich meine?

                            MfG Steffen

                            Kommentar


                            • #15
                              Ich versteh dein Problem mit dem noscript-Tag nicht... Der ist doch genau dafür da.

                              Ruf das bitte mal "normal" mit JS aus und dann ohne. http://jsfiddle.net/GG9Sa/2399/
                              Wenn kein JS aktiv, dann kommt das Modal-Fenster. Sowas willst du doch, oder?

                              CSS Modal Popup einblenden wenn JavaScript deaktiviert ist
                              The string "()()" is not palindrom but the String "())(" is.

                              Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                              PHP.de Wissenssammlung | Kein Support per PN

                              Kommentar

                              Lädt...
                              X