Verstecken Sie alles auf der Seite, bis das Popup-Fenster zur Altersbestätigung erscheint?

Question

Also gibt es eine bestimmte Seite auf der Website, die ich gerade erstelle (nur die Page-Datei 19.html genannt), wo es fragt, ob der Benutzer über 19 Jahre alt ist, durch ein Popup. Hier ist die 19.js Datei dafür, die ich auf meiner 19.html Seite verlinkt habe.

var yourAge = prompt("Please enter your age: ") 
if (yourAge < 19) 
    alert("Users under the age of 19 cannot access this page"); 

if (yourAge >= 19) 
    alert("Enjoy!"); 
if (yourAge < 19) 
    location.href = ("../html/index.html"); 

Es gibt keine Inhalte auf der Seite noch so habe ich nur einen einfachen „Hallo“ Text in dem div class = „board“, die ich auf meiner 19.html Seite erstellt. Ich möchte jedoch nicht den "Hallo" -Text (und jeden anderen zukünftigen Inhalt, den ich in das div für diese Seite einfügen werde) erscheinen, bis der Benutzer erfolgreich sein Alter für den Zugriff auf die Seite eingibt und nach dem "Viel Spaß!" " Pop-up. Kann mir jemand helfen, wie ich das mache? Muss ich jQuery irgendwie implementieren? Bitte helfen Sie, danke.

die div Board in meine HTML-Datei:

<div class="board"> 
<h1>Hello</h1> 
</div> 

Answer 1

auf Kommentare basierend Aktualisiert existiert

diese CSS-Regel Angenommen, wird die zugegebene Probe

das "Hallo" Text zeigen

.board h1 { 
    display: none; 
} 
.board.showme h1 { 
    display: block; 
} 

Ein einfacher Ansatz wäre so, mit AJAX, obwohl sehr einfach zu cra

ck

document.querySelector('a').addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 

 
    var yourAge = prompt("Please enter your age: ") 
 
    
 
    if (yourAge < 19) { 
 
    alert("Users under the age of 19 cannot access this page"); 
 
    // temp. commented out as not having a real link to 19.html 
 
    //location.href = ("../html/index.html"); 
 
    } 
 

 
    if (yourAge >= 19) { 
 
    alert("Enjoy!"); 
 
    document.querySelector('.board').classList.add('showme'); 
 
    var xhttp = new XMLHttpRequest(); 
 
    xhttp.onreadystatechange = function() { 
 
     if (xhttp.readyState == 4 && xhttp.status == 200) {   
 
     document.getElementById("content").innerHTML = xhttp.responseText; 
 
     } 
 
    }; 
 
    xhttp.open("GET", "19.html", true); 
 
    // temp. commented ou as not having a real link to 19.html 
 
    //xhttp.send(); 
 
    } 
 

 
})

.board h1 { 
 
    display: none; 
 
} 
 
.board.showme h1 { 
 
    display: block; 
 
}

<a href="19.html">Goto page 19</a> 
 
<div class="board"> 
 
    <h1>Hello</h1> 
 
</div>

Exkurs

Als @vastlysuperiorman vorgeschlagen, können Sie natürlich auch einfach die 19.html Datei direkt aufrufen.

Answer 2

Wenn nach der Warnung eine Warnung angezeigt wird (wenn auf 'OK' geklickt wird), können Sie eine benutzerdefinierte Rückruffunktion erstellen. Hier ist der Code mit dem Zusatz eines Rückrufs:

var yourAge = prompt("Please enter your age: "); 
if (yourAge < 19) { 
    alert("Users under the age of 19 cannot access this page"); 
    location.href = ("../html/index.html"); 
} 

if (yourAge >= 19) { 
    function wishWell(amsg, callback){ 
     alert(amsg); 
     if(typeof callback == "function") { 
      callback(); 
     } 
    } 

    wishWell("Enjoy!", function(){ 
     location.href = ("19.html"); 
    }); 
} 

Wie viele Anwender schon erwähnt haben, ist dies kein sicheres Verfahren Zugriff auf Ihre Seite zu verhindern, da die Javascript durch den Benutzer mit allen Links zu sehen sein wird.

Dies ist auch nicht der beste Weg, um einen Benutzer mit Ihrer Website interagieren zu lassen. Einige Browser wie Chrome ermöglichen das Blockieren von Popup-Benachrichtigungen über das Kontrollkästchen "Verhindern, dass auf dieser Website zusätzliche Popups angezeigt werden". oder etwas in diesem Ausmaß. Wenn der Benutzer das Kontrollkästchen aktiviert hat, werden alle Ihre Eingabeaufforderungen bei der erneuten Durchsicht der Seite mit den zuvor eingegebenen Daten ignoriert.

Answer 3

würde ich den Inhalt div verstecken und es nur angezeigt, wenn die Antwort> = 19. Etwas des Benutzers wie folgt funktionieren würde:

19.html

<div id="content" style="display: none;"> 
// ... 
</div> 

19.js

var yourAge = prompt("Please enter your age: ") 

if (yourAge >= 19) { 
    alert("Enjoy!"); 
    document.getElementById("content").style.display = "block"; 
} else { 
    alert("Users under the age of 19 cannot access this page"); 
    location.href = ("../html/index.html"); 
} 

Obwohl dies funktioniert, ist JavaScript dennoch aktiviert.Und da der Inhalt bereits gesendet wurde, können Entwicklerwerkzeuge leicht geöffnet und der Stil manuell geändert werden.