利用JQuery制作符合Web标准的QQ弹出消息(2)

日期：2020-06-11 栏目：程序人生浏览：次

这个问题的关键在于，Firefox以html为页面的根元素，而IE以body为根元素。你设置了body为1800px高，但是在Firefox中，html元素的高度仍然是0，因此你的div#pop，实际上起点是最上面。

修改方法很简单，增加一条CSS设置即可：

html{
height:100%;
}

这样，一开始的时候，html的高度充满浏览器窗口，pop就到底下去了，效果和在IE中完全相同。

所以搞JS，CSS是非常重要的基础，一定要把CSS搞的非常清楚。

下面是最终源码:

<!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 runat="server">
    <title>QQ弹出消息</title>
    <style type="text/css">
    html{
        height: 100%;
    }
        #pop{
            width: 250px;
            height: 150px;
            border: 1px solid #fcc;
            background-color: yellow;
            position: absolute;
            right: 16px;
            bottom: -150px;
            display: none;
        }
    </style>
    <script src="https://www.jb51.net/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(document).ready(function() {
            $("#pop").css("opacity", 0);
            $("#btn").click(fun);
            $("#cloPop").click(fun2);
        });

        function fun() {   /* 弹出框从下往上慢慢升起,其中还包括了透明度的变化 */
            $("#pop").css("display", "block");
                $("#pop").animate({
                    bottom: "16px",
                    opacity: 1
                },1000);
        }

        function fun2() {   /* 弹出框从上往下降下去 */
            $("#pop").css("display", "block");
                $("#pop").animate({
                    bottom: "-150px",
                    opacity: 0
                },1000);
        }
    </script>
</head>
<body>
    <form runat="server">
    <div>
    <input type="button" value="缓缓升起的窗口" />
    <div></div>
    </div>
    </form>
    <div>
        <a href="https://g.cn" target="_blank">有新用户注册</a>
        <a href="#">关闭</a>
    </div>
</body>
</html>

您可能感兴趣的文章:

转载注明出处：https://www.heiqu.com/wdyppy.html

利用JQuery制作符合Web标准的QQ弹出消息(2)

相关推荐