自定義商務通二次彈出原理,商務通窗口被關閉后,指定時間后再次彈出。演示代碼僅使用純色作為彈出窗背景,實際運用中可替換為圖片。
核心代碼:
<script>
function hideSwt(){
document.getElementById("swtBox").style.display='none';//隱藏彈出窗口
//設置定時器,5秒后顯示彈出窗口
setTimeout(function(){
document.getElementById("swtBox").style.display='block';
},5000);
}
</script>
效果截圖:
代碼如下:
<title></title>
<style type="text/css">
#swtBox {
margin-top:-150px;
margin-left:-220px;
width:440px;
height:300px;
position:fixed;
top:50%;
left:50%;
background:#CCC;
_position: absolute;
_top: expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop));
_left: expression(eval(document.documentElement.clientWidth/2+document.documentElement.scrollLeft));
}
#swtBox #close{
width:30px;
height:30px;
line-height:30px;
position:absolute;
top:0;
right:0;
display:block;
background:#333;
color:#FFF;
text-align:center;
text-decoration:none;
}
#swtBox #close:hover {
background:#F00;
}
#swtBox #chat {
width:100%;
height:100%;
display:block;
}</style>
<script>
function hideSwt(){
document.getElementById("swtBox").style.display='none';//隱藏彈出窗口
//設置定時器,5秒后顯示彈出窗口
setTimeout(function(){
document.getElementById("swtBox").style.display='block';
},5000);
}
</script>
<div id="swtBox">
<a href="javascript:;" id="close" onclick="hideSwt();" title="關閉">X</a></div>
<p>演示:自定義商務通二次彈出原理</p>