javascript實現的右下角彈窗實例

2024-05-06 16:18:34

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript實現的右下角彈窗,實例分析了javascript實現右下角彈窗的完整實現步驟與技巧,需要的朋友可以參考下

本文實例講述了javascript實現的右下角彈窗的方法。分享給大家供大家參考。具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>右下角的彈窗</title>

<style type="text/css">

body { background:#333333;}

#winpop {

width:200px; height:0px;

position:absolute; right:0; bottom:0;

border:1px solid #999999; margin:0; padding:1px;

overflow:hidden; display:none; background:#FFFFFF

}

#winpop .title {

width:100%; height:20px;

line-height:20px; background:#FFCC00;

font-weight:bold; text-align:center;

font-size:12px;

}

#winpop .con {

width:100%; height:80px;

line-height:80px; font-weight:bold;

font-size:12px; color:#FF0000;

text-decoration:underline; text-align:center

}

#silu {

font-size:13px; color:#999999;

position:absolute; right:0;

text-align:right; text-decoration:underline;

line-height:22px;

}

.close {

position:absolute; right:4px; top:-1px;

color:#FFFFFF; cursor:pointer

}

</style>

<script type="text/javascript">

function tips_pop(){

var MsgPop=document.getElementById("winpop");

var popH=parseInt(MsgPop.style.height);

if (popH==0){

MsgPop.style.display="block";

show=setInterval("changeH('up')",2);

}

else {

hide=setInterval("changeH('down')",2);

}

}

function changeH(str) {

var MsgPop=document.getElementById("winpop");

var popH=parseInt(MsgPop.style.height);

if(str=="up"){

if (popH<=100){

MsgPop.style.height=(popH+4).toString()+"px";

}

else{

clearInterval(show);

}

}

if(str=="down"){

if (popH>=4){

MsgPop.style.height=(popH-4).toString()+"px";

}

else{

clearInterval(hide);

MsgPop.style.display="none";

}

}

}

window.onload=function(){

document.getElementById('winpop').style.height='0px';

setTimeout("tips_pop()",800);

}

</script>

</head>

<body>

內容展示內容展示內容展示內容展示內容展示

內容展示內容展示內容展示內容展示內容展示

內容展示內容展示內容展示內容展示內容展示

<hr>

<div id="silu">

<button onclick="tips_pop()">測試按鈕</button>

</div>

<div id="winpop">

<div class="title">您有新的消息

<span class="close" onclick="tips_pop()">X</span></div>

<div class="con">未讀信息(1)</div>

</div>

<div>http://www.49028c.com/</div>

</body>

</html>