javascript右下角弹框实现

最新推荐文章于 2024-04-20 15:13:33 发布

zkcharge

最新推荐文章于 2024-04-20 15:13:33 发布

阅读量911

点赞数

分类专栏： js

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的提示框自动弹出与隐藏的效果。该效果包括一个固定在页面底部右侧的提示框，通过点击链接可以展开或收起提示框，同时展示两条关于设备例行质控的通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>aa</title> 
<style type="text/css"> 
* 
{ 
margin: 0px; 
padding: 0px; 
} 
html, body 
{ 
height: 100%; 
} 
body 
{ 
font-size: 14px; 
line-height: 24px; 
} 
#tip 
{ 
position: absolute; 
right: 0px; 
bottom: 0px; 
height: 0px; 
width: 180px; 
border: 1px solid #CCCCCC; 
background-color: #eeeeee; 
padding: 1px; 
overflow: hidden; 
display: none; 
font-size: 12px; 
z-index: 10; 
} 
#tip p 
{ 
padding: 6px; 
} 
#tip h1, #detail h1 
{ 
font-size: 14px; 
height: 25px; 
line-height: 25px; 
background-color: #0066CC; 
color: #FFFFFF; 
padding: 0px 3px 0px 3px; 
filter: Alpha(Opacity=100); 
} 
#tip h1 a, #detail h1 a 
{ 
float: right; 
text-decoration: none; 
color: #FFFFFF; 
} 
</style> 
<script type="text/javascript">
    window.onload = function () {
        var divTip = document.createElement("div");
        divTip.id = "tip";
        divTip.innerHTML = "<h1><a href='javascript:void(0)' onclick='start()'>×</a>设备例行质控自动提醒</h1><p><a href='javascript:void(0)' onclick='showwin()'>华电电厂SO2监测设备2013-12-12需要例行质控</a></p><p><a href='javascript:void(0)' onclick='showwin()'>永泰电厂烟尘监测设备2013-12-12需要例行质控</a></p>";
        divTip.style.height = '0px';
        divTip.style.bottom = '0px';
        divTip.style.position = 'fixed';
        divTip.style.width='400px'
        document.body.appendChild(divTip);
    }
    var handle;
    function start(count) {
        var obj = document.getElementById("tip");
        if (parseInt(obj.style.height) == 0) {
            obj.style.display = "block";
            handle = setInterval("changeH('up')", 20);
        } else {
            handle = setInterval("changeH('down')", 20)
        }
    }
    function changeH(str) {
        var obj = document.all ? document.all["tip"] : document.getElementById("tip");
        if (str == "up") {
            if (parseInt(obj.style.height) > 100)
                clearInterval(handle);
            else
                obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";
        }
        if (str == "down") {
            if (parseInt(obj.style.height) < 8) {
                clearInterval(handle);
                obj.style.display = "none";
            }
            else
                obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";
        }
    }
    function showwin() {
        document.getElementsByTagName("html")[0].style.overflow = "hidden";
        start();
        window.open("http://tools.jb51.net");
    }
</script> 
</head> 
<body> 
<a href="javascript:void(0)" onclick="start()">click</a> 
</body> 
</html>