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

Question

所以我想让这个弹出窗口在3秒后消失。我已经尝试过最推荐的延迟查询，但我必须做错了，因为每次我添加它都会在网页的其他部分发生故障。对于java来说，我是新手。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此代码将在3秒后执行：

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_notification_icon"/>
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/color_of_your_desire"/>

Answer 2

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

＆＃13;

＆＃13;

$(document).ready(function(){

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

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在脚本末尾添加此代码，它应该可以工作：

＆＃xA;＆＃xA;

  window.setTimeout（function（）{＆＃xA; $（ “#thover”）。fadeOut（）;＆＃xA; $（“＃tpopup”）。fadeOut（）}，3000）;＆＃xA;  

＆＃xA;