弹出层

方法（案例）一：（单纯的点击弹出，点击关闭按钮则关闭，点弹窗以为的地方无效）

css

.yin_xian{display: none;}
.tan{width: 300px ;height: 300px;position: relative; 
background: #fe7100;text-align: center;}
.tan img{width: 100px ;height: 100px;margin: 0 50px; text-align: center;}
#cha{background: url("../images/icon_del.png") no-repeat ;width: 20px; height: 20px; 
position: absolute; right: 0;top: 10px;}

html

<div>
    <div class="anniu">
        <a href="#" class="d3">点击我弹出窗口</a>
    </div>
    <div class="tan yin_xian">
        <img src="images/ewm.jpg">
        <div id="cha"></div>
    </div>
</div>

js

<script src="js/jquery-1.10.2.min.js"></script>
<script>
    $(function(){
        $('.d3').click(function(){
            $('.tan').show();
        });
        $('#cha').click(function(){
            $('.tan').hide();
        });
    });
</script>

方法（案例）二：（点击弹出，点击关闭按钮以及弹窗之外的地方都能关闭）  

‍css和html与上面一样，只是js代码不同‍

js

<script>
    $(document).ready(function(){
        $(".d3").click(function(e){
            e.stopPropagation();
            $(".tan").removeClass("yin_xian");
        });
        $(document).click(function(){
            if(!$(".tan").hasClass("yin_xian")){
                $(".tan").addClass("yin_xian");}
        });
    });
</script>

<!--
stopPropagation()
 不再派发事件。
 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，
 该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。
 在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个
 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
 -->

如果需要判断屏幕宽高，则请到这里，用js判断获取高度。

http://my.oschina.net/parchments/blog/655151

//如有误，烦请联系指导，谢谢