Question

新手请教js 怎么才能改成点击任何地方都能关闭弹出层

<a class="showdiv" href="">北京</a> <div class="showbox"> <div class="close" > <p>{s:field.e_beijing/}</p> </div> </div> <div id="zhezhao"></div> <script type="text/javascript"> $(document).ready(function(){ $(".showdiv").click(function(){ var box =300; var th= $(window).scrollTop()+$(window).height()/1.6-box; var h =document.body.clientHeight; var rw =$(window).width()/2-box; $(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500); $("#zhezhao").css({ display:"block",height:$(document).height() }); return false; }); $(".showbox .close").click(function(){ $(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500); $("#zhezhao").css("display","none"); }); }); </script>

Answer 1

jQuery(function($) {
    var showdiv = $(".showdiv"),
        showbox = $(".showbox"),
        zhezhao = $("#zhezhao"),
        doc = $(document),
        win = $(window);
    showdiv.click(function() {
        var box = 300;
        var th = win.scrollTop() + win.height() / 1.6 - box;
        var h = document.body.clientHeight;
        var rw = win.width() / 2 - box;
        showbox.animate({
            top: th,
            opacity: 'show',
            width: 600,
            height: 340,
            right: rw
        }, 500);
        zhezhao.css({
            display: "block",
            height: doc.height()
        });
        return false;
    });
    $(".showbox .close,#zhezhao").click(function() {
        showbox.animate({
            top: 0,
            opacity: 'hide',
            width: 0,
            height: 0,
            right: 0
        }, 500);
        zhezhao.hide();
    });
});