javascript - 3秒后如何使我的弹出窗口消失

因此，我想让此弹出窗口在3秒钟后消失。我尝试了最推荐的延迟查询，但我一定做错了，因为每次将其添加到网页的其他部分时，都会出现故障。关于Java我是新手。

<script>
$(document).ready(function(){

  $("#thover").click(function(){
		$(this).fadeOut();
    $("#tpopup").fadeOut();
	});


  $("#tclose").click(function(){
		$("#thover").fadeOut();
    $("#tpopup").fadeOut();
	});

});
	</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">
	&nbsp;</div>
<div id="tpopup">
	<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;" />
	<div id="tclose">
		X</div>
    </div>

最佳答案

我将为此创建一个单独的函数，称为closePopup，然后在相关的click函数中调用它，并在页面加载3秒钟后一起调用它。

$(document).ready(function(){

  function closePopup(){
		$("#thover").fadeOut();
    $("#tpopup").fadeOut();
	}

  $("#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">
	&nbsp;</div>
<div id="tpopup">
	<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;" />
	<div id="tclose">
		X</div>
    </div>