js判断ie6 ie6完美提示框

日期 2012年03月27日 02:09

分类 Web

标签

浏览 19718

字数统计: 3729(字)

本文发布于 12 年前, 内容可能已经过时或失效!

首先贴出判断ie6的js方法:(你可以复制代码到本地试试)

<script type="text/javascript">
    if (window.ActiveXObject) {
        var ua = navigator.userAgent.toLowerCase();
        var ie = ua.match(/msie ([\d.]+)/)[1]
        if (ie == 6.0) {
            alert("您的浏览器版本过低,在本系统中不能达到良好的视觉效果,建议你升级到ie8以上!");
            window.close();
        }
    }
</script>

单是alert()弹窗提示信息,太丑陋,而且信息内容受限制,于是我们可以单独做一层(弹出层)居中显示你需要的信息

代码如下

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ie6弹出层显示信息</title>
</head>
<body>
<!--ie6弹出层显示信息-->
<script type="text/javascript">
    window.onload = function () {
        var popDiv = document.getElementById("popDiv");
        var acontinue = document.getElementById("acontinue");
        var aClose = document.getElementById('aClose');
        if (window.ActiveXObject) {
            var ua = navigator.userAgent.toLowerCase();
            var ie = ua.match(/msie ([\d.]+)/)[1]
            if (ie == 6.0) {
                popDiv.style.display = "block";
                acontinue.onclick = function () {
                    popDiv.style.display = "none";
                }
                aClose.onclick = function () {
                    window.close();
                }
            }
        }
    }
</script>
<style type="text/css">
    body {background: #fcf6f0;}
    * {margin: 0;padding: 0;}
    /*弹出层的STYLE*/
    #popDiv {
        width: 412px;
        background: #f0f0f6;
        border: 10px solid #e0e0e0;
        padding: 0 0 10px 0;
        border-top: none;
        text-align: left;
        font-size: 12px;
        z-index: 99;
        left: 50%; /*FF IE7*/
        top: 50%; /*FF IE7*/
        margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
        margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
        margin-top: 0px;
        position: fixed !important; /*FF IE7*/
        position: absolute; /*IE6*/
        _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
    }
    #popDiv a {text-decoration: none;color: #f00;}
    #popDiv a:hover {color: #f60;}
    #isclose {
        position: absolute;
        bottom: 5px;
        right: 6px;
    }
    #aClose, #acontinue {
        border: 1px solid #e0e0e0;
        padding: 2px 5px;
        background: #f0f0f6;
    }
    #aClose:hover, #acontinue:hover {color: #f60;background: #fc6;}
    #bg {background: #fcf6f0;width: 100%;height: 100%;z-index: 98;filter: Alpha(Opacity:"50")}
    #popDiv h1 {font-size: 12px;line-height: 24px;background: #e0e0e0;line-height: 30px;color: #333;}
    #popDiv h2 {font-size: 12px;text-indent: 24px;line-height: 24px;color: #333;font-weight: normal;padding: 10px;}
    #popDiv p {line-height: 24px;display: inline-block;text-indent: 24px;}
    /*The END*/
</style>
<div id="bg"></div>
<div id="popDiv" style="display:none;">
    <h1>贵州省志愿者信息管理系统 Ver 2.0 友情提示:</h1>
    <h2>您使用的是较低版本浏览器,将导致无法使用后台的部分功能。建议您使用 IE8.0
        或其他较新版本浏览器,以便更好的感受本系统的各项特色功能及服务,感谢您对贵州志愿服务网的关心和支持。</h2>
    <p>政策咨询热线:0851-5514292</p>
    <p>技术支持热线:0851-6996078</p>
    <p id="isclose"><a title="" href="javascript:void();" id="acontinue">继续使用</a>
        <a title="" href="javascript:closeDiv()" id="aClose">关闭窗口</a></p>
</div>
<!--ie6弹出层显示信息end-->
</body>
</html>

ie6下效果预览如下:

image

这上面做的都只是针对ie6 ,js判断其他浏览器呢 请见:js判断浏览器类型及版本详细分析:

http://yanue.net/post-8.html
http://yanue.net/post-77.html