自定義商務(wù)通二次彈出原理,商務(wù)通窗口被關(guān)閉后,指定時(shí)間后再次彈出。演示代碼僅使用純色作為彈出窗背景,實(shí)際運(yùn)用中可替換為圖片。
核心代碼:
<script>
function hideSwt(){
document.getElementById("swtBox").style.display='none';//隱藏彈出窗口
//設(shè)置定時(shí)器,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';//隱藏彈出窗口
//設(shè)置定時(shí)器,5秒后顯示彈出窗口
setTimeout(function(){
document.getElementById("swtBox").style.display='block';
},5000);
}
</script>
<div id="swtBox">
<a href="javascript:;" id="close" onclick="hideSwt();" title="關(guān)閉">X</a></div>
<p>演示:自定義商務(wù)通二次彈出原理</p>