前几天去百度，随机写的一个面试题，写的不好啊

面试题是让写一个弹框的样式和js，当时没有想好，回来后想了想觉得也挺简单的，哎，心理素质不行啊。。。

首先是html的部分，就不写啥好看的样式了

<body>
        <input type="button" id="show" value="点击显示"/>
        <div class="box" id="box">
            <div class="box-title" id="box_title">这个是有个title</div>
            <div class="box-main" id="box_mian">这个是主体</div>
        </div>
    </body>

js

<script type="text/javascript">
        var isIe = false;
        var navigatorName = "Microsoft Internet Explorer"; 
        if(navigator.appName == navigatorName){
            isIe = true;
        }
    
        var btn = document.getElementById('show');
        var box = document.getElementById('box');
        
        // 创建一个背景div
        var back = document.createElement('div');
        back.id = 'bodyDiv';
        
        var bWidth = parseInt(document.documentElement.scrollWidth);
        var bHeight = parseInt(document.documentElement.scrollHeight);
        
        var styleStr = "top:0px; left:0px; position:absolute; background-color:rgb(0,0,0); width:"+bWidth+"px; height:"+bHeight+"px;";
        styleStr += (isIe)?"filter:alpha(opacity=30);":"opacity:0.3;";
        back.style.cssText = styleStr;
        document.body.appendChild(back);
        
        var left = (document.body.scrollWidth - box.offsetWidth) / 2;
        //加了<!DOCTYPE html PUBLIC后，在ie中这些document.body的属性已经重新分配给了document.documentElement。
        var maintainheight = ((document.documentElement.clientHeight == 0) ? document.body.clientHeight : document.documentElement.clientHeight);
        var maintainscroll=((document.documentElement.scrollTop == 0) ? document.body.scrollTop : document.documentElement.scrollTop);
        var top = maintainscroll + maintainheight / 2-85;
        styleStr="top:"+top+"px;left:"+left+"px;position:absolute;z-index:9999;";
        box.style.cssText=styleStr;
        
        
        btn.onclick = function() {
            box.style.display = 'block';
            alert(cHeight);
        }
    </script>

样式就是些简单的

<style type="text/css">
            .box{width: 400px; height: 150px; border: 1px solid #000000; background-color: #FFFFFF; color: #000000;}
            .box-title{height: 30px; line-height: 30px;}
            
        </style>

 

posted @ 2014-03-13 13:42  mp1024  阅读(166)  评论(0)    收藏  举报