jquery不同间隔时间弹窗

查看效果:http://www.neixun360.com/eg/eg2/demo.htm

需要完善:如何保证ie6下,弹出窗口垂直居中,且拖动滚动条时,弹出窗口不抖动???

<!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>
    <meta content="div,间隔弹窗" name="description">
    <meta content="div,间隔弹窗" name="keywords">
    <title>div,间隔弹窗</title>
    <style>
#LRdiv1{width:480px;height:310px;overflow:hidden;position:fixed;*position:absolute;left:370px;top:220px;*top: expression(eval(document.documentElement.scrollTop+220));color:#000000;font-size:12px;margin:0;padding:0;}
    </style>
</head>
<script type="text/javascript" src="http://www.leyikao.com/templets/default/js/jquery.min.js"></script>
<body>
<p>打开网页2s后,第一次弹窗;关闭弹窗后,间隔3s弹窗。两个时间都是可以修改的。</p>
<p style="color:#f00;">求助:如何保证ie6下,弹出窗口垂直居中,且拖动滚动条时,弹出窗口不抖动???</p>
<div style="display: none;" id="LRdiv1">
    <img border="0" usemap="#MapLR" src="http://www.leyikao.com/templets/default/Images/t.png" width=480 height=310>
    <map name="MapLR" id="MapLR">
         <area shape="rect" coords="78,219,231,258" href="javascript:void(0)" onclick="divclose();" />
         <area shape="rect" coords="242,219,398,258"  href="javascript:void(0)" onclick="zxdiv();" />
    </map>
</div>
<script type="text/javascript">
//获取窗口的高度 
var windowHeight; 
//获取窗口的宽度 
var windowWidth; 
//获取弹窗的宽度 
var popWidth; 
//获取弹窗高度 
var popHeight; 
function init(){ 
   windowHeight=$(window).height(); 
   windowWidth=$(window).width(); 
   popHeight=$("#LRdiv1").height(); 
   popWidth=$("#LRdiv1").width(); 
}
     $(function(){
            init();
            var popY=(windowHeight-popHeight)/2; 
            var popX=(windowWidth-popWidth)/2;
            $("#LRdiv1").css("left",popX);
            $("#LRdiv1").delay(2000).show(500);
        });
    function divclose(){
        $("#LRdiv1").hide();
        $("#LRdiv1").delay(3000).show(500);
    }
    function zxdiv(){
        window.open("http://chat10.live800.com/live800/chatClient/chatbox.jsp?jid=1340831441&companyID=195572&configID=174342&skillId=10417&enterurl=http%3A%2F%2Fwww.leyikao.com%2F&tm=1341541098354");
    }
    </script>
</body>
</html>
<div style="display:none;">
<script src="http://s21.cnzz.com/stat.php?id=4445316&web_id=4445316" language="JavaScript"></script>
</div>

查看效果:http://www.neixun360.com/eg/eg2/demo.htm

posted @ 2012-08-30 09:22  通海口  阅读(697)  评论(1编辑  收藏  举报