zoukankan      html  css  js  c++  java
  • 右下角弹出框

    $(document).ready(function()
    {    
        document.getElementById('winpop').style.height = '0px';
        setTimeout("tips_pop()", 800); //3秒后调用tips_pop()这个函数
    });
    
    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 <= 237) {
                    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";  //隐藏DIV
                }
            }
    }

    页面html

    <div id="winpop">
        <div class="title">
            <span class="close" onclick="tips_pop()">关闭</span></div>
        <div class="con"></div>
    </div>    

    样式

    #winpop{width: 494px;height: 272px;position: absolute;right: 0;bottom: 0;border: 1px solid #666;margin: -1;padding: 1px;overflow: hidden;display: none;z-index: 10;filter: alpha(opacity=85);opacity: 0.85;}
    #winpop .title{width: 100%;height: 15px;line-height: 15px;background: white;font-weight: bold;text-align: center;font-size: 12px;}
    #winpop .con{width: 100%;height: 240px;font-weight: bold;font-size: 12px;color: #FF0000;text-align: center;background: url(../images/Bulletin.jpg) 0 0 no-repeat;}
    #winpop .con .pp{height: 10px;line-height: 10px;}
    .close{position: absolute;right: 4px;top: -1px;color: #000;cursor: pointer;}
  • 相关阅读:
    深入了解抽象类和接口
    关于Hibernate查询对象调用set方法自动同步到数据库解决方案
    【鸽子的迷信(一)】python导入由excel文件改后缀变成的csv文件出现乱码错误(ParserError:Error tokenizing data. C error:)
    《计算机操作系统》CH1操作系统引论思维导图整理
    IntelliJ IDEA创建一个Maven项目
    C++实验三
    小练习
    C++实验二
    C++的ch1&ch2的整理
    C++实验一
  • 原文地址:https://www.cnblogs.com/dreamshallow/p/3653857.html
Copyright © 2011-2022 走看看