Wie mache ich mein Popup nach 3 Sekunden verschwinden?

Question

Also möchte ich dieses Popup nach 3 Sekunden verschwinden lassen. Ich habe versucht, die Verzögerung Abfrage, die die meisten empfehlen, aber ich muss etwas falsch machen, denn jedes Mal, wenn ich es in etwas hinzufügen glitchy beginnt mit anderen Teilen meiner Webseite passiert. Ich bin Anfänger, wenn es um Java geht.

<script> 
 
$(document).ready(function(){ 
 
    
 
    $("#thover").click(function(){ 
 
\t \t $(this).fadeOut(); 
 
    $("#tpopup").fadeOut(); 
 
\t }); 
 
    
 
    
 
    $("#tclose").click(function(){ 
 
\t \t $("#thover").fadeOut(); 
 
    $("#tpopup").fadeOut(); 
 
\t }); 
 
    
 
}); 
 
\t </script>

<style type="text/css"> 
 
#thover{ 
 
    position:fixed; 
 
    background:#000; 
 
    width:100%; 
 
    height:100%; 
 
    opacity: .6 
 
} 
 
    
 
#tpopup{ 
 
    position:absolute; 
 
    width:600px; 
 
    height:280px; 
 
    background:#fff; 
 
    left:50%; 
 
    top:97%; 
 
    border-radius:5px; 
 
    padding:0px 0; 
 
    margin-left:-320px; /* width/2 + padding-left */ 
 
    margin-top:-150px; /* height/2 + padding-top */ 
 
    text-align:center; 
 
    box-shadow:0 0 10px 0 #000; 
 
} 
 
#tclose{ 
 
    position:absolute; 
 
    background:black; 
 
    color:white; 
 
    right:-15px; 
 
    top:-15px; 
 
    border-radius:50%; 
 
    width:30px; 
 
    height:30px; 
 
    line-height:30px; 
 
    text-align:center; 
 
    font-size:8px; 
 
    font-weight:bold; 
 
    font-family:'Arial Black', Arial, sans-serif; 
 
    cursor:pointer; 
 
    box-shadow:0 0 10px 0 #000; 
 
}</style>

<div id="thover"> 
 
\t &nbsp;</div> 
 
<div id="tpopup"> 
 
\t <img src="" /><img alt="http://www.raffles-american-school.edu.my/usr/pagesub.aspx?pgid=62" src="/data/cms/images/boarding_pop_up_3(1).jpg" style="width: 600px; height: 280px;" /> 
 
\t <div id="tclose"> 
 
\t \t X</div> 
 
    </div>

Answer 1

ich eine eigene Funktion dafür schaffen würde, die so genannte closePopup es dann in den entsprechenden Klick-Funktion aufrufen, zusammen mit invoke wenn die Seite 3 Sekunden lang geladen wurde.

$(document).ready(function(){ 
 

 
    function closePopup(){ 
 
\t \t $("#thover").fadeOut(); 
 
    $("#tpopup").fadeOut(); 
 
\t } 
 
    
 
    $("#thover").click(closePopup); 
 
    $("#tclose").click(closePopup); 
 
    
 
    setTimeout(closePopup,3000); 
 
    
 
});

<style type="text/css"> 
 
#thover{ 
 
    position:fixed; 
 
    background:#000; 
 
    width:100%; 
 
    height:100%; 
 
    opacity: .6 
 
} 
 
    
 
#tpopup{ 
 
    position:absolute; 
 
    width:600px; 
 
    height:280px; 
 
    background:#fff; 
 
    left:50%; 
 
    top:97%; 
 
    border-radius:5px; 
 
    padding:0px 0; 
 
    margin-left:-320px; /* width/2 + padding-left */ 
 
    margin-top:-150px; /* height/2 + padding-top */ 
 
    text-align:center; 
 
    box-shadow:0 0 10px 0 #000; 
 
} 
 
#tclose{ 
 
    position:absolute; 
 
    background:black; 
 
    color:white; 
 
    right:-15px; 
 
    top:-15px; 
 
    border-radius:50%; 
 
    width:30px; 
 
    height:30px; 
 
    line-height:30px; 
 
    text-align:center; 
 
    font-size:8px; 
 
    font-weight:bold; 
 
    font-family:'Arial Black', Arial, sans-serif; 
 
    cursor:pointer; 
 
    box-shadow:0 0 10px 0 #000; 
 
}</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="thover"> 
 
\t &nbsp;</div> 
 
<div id="tpopup"> 
 
\t <img src="" /><img alt="http://www.raffles-american-school.edu.my/usr/pagesub.aspx?pgid=62" src="/data/cms/images/boarding_pop_up_3(1).jpg" style="width: 600px; height: 280px;" /> 
 
\t <div id="tclose"> 
 
\t \t X</div> 
 
    </div>

Answer 2

Dieser Code nach 3 Sekunden ausgeführt wird:

setTimeout(function(){ 
    $("#tpopup").fadeOut(); 
},3000) 

Answer 3

diesen Code am Ende des Skripts hinzufügen, und es sollte funktionieren:

window.setTimeout(function(){ 
     $("#thover").fadeOut(); 
     $("#tpopup").fadeOut()}, 3000);