转,弹出提示框-优快云博客

本文介绍了一个使用HTML、CSS及JavaScript实现的春节祝福弹窗案例。该案例详细展示了如何通过前端技术创建一个可以自动弹出并跟随鼠标移动的祝福消息窗口，同时提供了完整的代码示例。

<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="images/style.css" type="text/css" />
    <style type="text/css">
    
    </style>
    <script src="images/noticediv.js" language="javascript" type="text/javascript"></script>
</head>
<body class="body">
    <form id="form1" runat="server">
        <asp:Panel ID="Panel1" runat="server" Width="500px">
            <div id="boysoft" class="divyidong" style="right: 0; position: absolute; visibility: hidden; z-index: 1">
                <table border="0" cellpadding="0" cellspacing="0" width="500px">
                    <tr>
                        <td onmousedown="initializedragie()" style="cursor: move; height: 20px; background-color: #cc6633;
                            font-weight: bold; color: #ffffff; font-size: 14px; width: 476px;" align="left">
                              系统消息
                        </td>
                        <td style="cursor: move; height: 20px; background-color: #cc6633; width: 24px;" align="right">
                            <img src="images/119.jpg" style="cursor: auto;" title="关闭" onclick="toggle('boysoft')" /></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table cellpadding="0" cellspacing="0" style="background-color: #fcf9f2" width="500px">
                                <tbody>
                                    <tr>
                                        <td align="center">
                                            <table border="0" cellpadding="0" cellspacing="0" width="99%">
                                                <tbody>
                                                    <tr>
                                                        <td align="left">
                                                            <br />
                                                            春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐春节快乐</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>

</form>
</body>
</html>

//加载窗体后从右下角弹出窗体
setTimeout("getMsg()",1000);
window.onerror = function(){}
//window.onerror当发生错误时发生的事
var sdivTop,sdivLeft,sdivWidth,sdivHeight,sdocHeight,sdocWidth,sobjTimer,i = 0;
function getMsg()
{
    try{
    sdivTop = parseInt(document.getElementById("boysoft").style.top,10)
    sdivLeft = parseInt(document.getElementById("boysoft").style.left,10)
    sdivHeight = parseInt(document.getElementById("boysoft").offsetHeight,10)
    sdivWidth = parseInt(document.getElementById("boysoft").offsetWidth,10)
    sdocWidth = document.documentElement.clientWidth;
    sdocHeight =document.documentElement.scrollTop+document.documentElement.clientHeight;
    document.getElementById("boysoft").style.top = parseInt(document.body.scrollTop,10) + sdocHeight + 10;// divHeight
    document.getElementById("boysoft").style.left = parseInt(document.body.scrollLeft,10) + sdocWidth - sdivWidth
    document.getElementById("boysoft").style.visibility="visible"
    sobjTimer = window.setInterval("moveDiv()",10)
    //解释：document.write (Balises); Time=window.setInterval("Alors()",10);输出文字，每10毫秒，变化一次。
    }
    catch(e){}
}
function moveDiv()
{
    try
    {
        if(parseInt(document.getElementById("boysoft").style.top,10) <= (sdocHeight - sdivHeight + parseInt(document.body.scrollTop,10)))
        {
            window.clearInterval(sobjTimer)
            //解释：clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

        }
        else
        {
            sdivTop = parseInt(document.getElementById("boysoft").style.top,10)
            document.getElementById("boysoft").style.top = sdivTop - 4
        }
    }
    catch(e){}
}

//关闭层
function toggle(targetid){
if (document.getElementById){
target=document.getElementById(targetid);
target.style.display="none";
}
}

//移动层
var dragswitch=0
var nsx
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for IE 4+////
/////////////////////////////////
var dragapproved=false
function drag_dropie(){
    if (dragapproved==true){
    document.all.boysoft.style.pixelLeft=tempx+event.clientX-iex
    document.all.boysoft.style.pixelTop=tempy+event.clientY-iey
    return false
    }
}
function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=boysoft.style.pixelLeft
tempy=boysoft.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}
if (document.all){
document.onmouseup=new Function("dragapproved=false")
}
////drag drop functions end here//////
function hidebox(){
if (document.all)
boysoft.style.visibility="hidden"
else if (document.layers)
document.boysoft.visibility="hide"
}

//让层跟着滚动条滚动
function sc5(){
document.getElementById("boysoft").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("boysoft").offsetHeight)+"px";
document.getElementById("boysoft").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("boysoft").offsetWidth)+"px";
}
window.onscroll=sc5;
window.onresize=sc5;
// window.onload=sc5;

</script>

转载于:https://www.cnblogs.com/gakgapple/archive/2009/01/15/1376162.html