js右下弹出消息框，兼容ie,firefox

最新推荐文章于 2021-06-27 00:18:51 发布

夜路人

最新推荐文章于 2021-06-27 00:18:51 发布

阅读量811

点赞数

CC 4.0 BY-SA版权

分类专栏：网页JS

本文链接：https://blog.youkuaiyun.com/wxljmy77/article/details/15029077

网页JS 专栏收录该内容

39 篇文章

订阅专栏

本文详细阐述了消息提示面板的实现过程，包括AJAX异步请求获取消息内容、动态调整面板位置确保屏幕右下角显示，以及消息声音提示等功能。通过代码示例和HTML结构解析，展示了如何在复杂网页环境中高效地实现个性化消息提示功能。

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

1.js代码
function index__msgdiv_popup()

    {
        var $div=$('#div_msgwin');
        //alert($div[0].top);
        $div[0].top=$div[0].top-10;
        $div[0].style.top=$div[0].top + "px";
        //alert(obj.offsetHeight);
        //setTimeout(slideme(obj),100);
        var div_lastpos_top=window.document.body.clientHeight-$div[0].offsetHeight;
        if($div[0].top>=div_lastpos_top) //直到弹出到top在目标位置top
        {
            setTimeout(index__msgdiv_popup,50);
        }
    }
    function index__msgdiv_hide()
    {
        var $div=$('#div_msgwin');
        $div[0].style.display="none";
    }
    //定时弹出消息提示窗口
    function popmsgwin()
    {
      try{
        var $div=$('#div_msgwin');
        var $msg_body=$div.find('#div_msgbody');
        var $frm_msgplay=$div.find('#frm_msgplay');
        //alert($frm_msgplay.length);
        //获取提示信息
        $.ajax({
          type:"POST",
          url:"oa_work_popmsg",
          data:"type=popmsg_list",
          dataType:"json",
          async:false,
          success:function(data){
              //alert(data.length);
              //$.each(data,function(x,y){
              // alert(x + "," + y);
              //});
              //消息内容显示
              var shtml="<table>";
              for(var i=0;i<data.length;i++)
              {
                 shtml+="<tr>";
                 shtml+="<td>" + data[i].id + "</td>";
                 shtml+="<td>" + data[i].type + "</td>";
                 shtml+="<td>" + data[i].title + "</td>";
                 shtml+="</tr>";
              }
              shtml+="</table>";
              //alert(shtml);
              $msg_body.html(shtml);
              //弹出消息窗口//右下角弹出
              try{
                var $div=$('#div_msgwin');
                //alert($div[0].offsetLeft);
                //alert($div[0].offsetWidth);
                //必须在前面!!，先display=block，才能获取到offsetHeight
                //offsetheight就是div的height，只读!!，使用div.style.width,div.width都不一定有值!!!
                $div[0].style.display="block";
                //alert(window.document.body.clientHeight + "," + window.document.body.clientWidth);
                //alert($div[0].offsetHeight + "," + $div[0].offsetWidth);
                //div面板就位，在屏幕右下角，屏幕之外！！
                var _top=window.document.body.clientHeight;//-$div[0].offsetHeight;
                var _width=window.document.body.clientWidth-$div[0].offsetWidth;
                //alert(_top + "," + _width);
                //
                $div[0].style.top=_top +"px"; //或者style.posTop=200
                $div[0].style.left=_width + "px";
                $div[0].style.zIndex="999999";
                //$div.fadeIn("slow");

//alert('kkjj');

//开始弹出窗口

                $div[0].top=_top; //初始化top属性，并当作计数器用
                setTimeout(index__msgdiv_popup,50);

                //alert($div[0].style.top + "," + $div[0].style.left);
              }catch(e){alert(e.message);}
              //消息声音提示
              try{
                  $frm_msgplay[0].src="player/player.jsp?fname=msg.wav";
              }catch(e){alert(e.message);}
          }
        });
      }catch(e)
      {
        alert(e.message);
      }
    }

2.html代码

<div id="div_msgwin" style="position:absolute;left:0px;top:0px;width:300px;height:216px;display:none;">
        
        <iframe id="frm_msgplay" src="" style="height:0px;width:0px;display:none;">
        </iframe>

        <div style="height:16px;background-color:#88aaff;" align="right">
            <a href="javascript:;" onclick="index__msgdiv_hide();";>
              <img src="images/index/closewin.png" />
            </a>
        </div>

        <div id="div_msgbody" style="background-color:#eeeeff;height:200px;z-index:99999;overflow-y:scroll;">
            <table>
                <tr><td>cccc</td></tr>
            </table>
        </div>
    </div>