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

本文详细阐述了消息提示面板的实现过程,包括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 -->
        <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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值