用div+iframe做弹窗

为什么80%的码农都做不了架构师？>>>   

用div和iframe做一个弹出层，在弹出层显示指定url的内容，这样的好处是，不用考虑真正窗口的地址栏、工具栏等事情，看代码

function showContent(url){
    //添加iframe
    var if_w = window.screen.availWidth-100;
    var if_h = window.screen.availHeight-50;
    //allowTransparency='true' 设置背景透明
    $("<iframe width='" + if_w + "' height='" + if_h + "' id='content_detail' name='content_detail' style='position:absolute;z-index:9999;'  frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'></iframe>").prependTo('body');
    var st=document.documentElement.scrollTop|| document.body.scrollTop;//滚动条距顶部的距离
    var sl=document.documentElement.scrollLeft|| document.body.scrollLeft;//滚动条距左边的距离
    var ch=window.screen.availHeight;//屏幕的高度
    var cw=window.screen.availWidth;//屏幕的宽度
    var objH=$("#content_detail").height();//浮动对象的高度
    var objW=$("#content_detail").width();//浮动对象的宽度
    var objT=Number(st)+(Number(ch)-Number(objH))/2;
    var objL=Number(sl)+(Number(cw)-Number(objW))/2;
    $("#content_detail").css('left',objL);
    $("#content_detail").css('top',objT);

    $("#content_detail").attr("src", url)

    //添加背景遮罩
    $("<div id='content_detail_bg' style='background-color: black;display:block;z-index:9998;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>").prependTo('body');
    $("#content_detail_bg").css({width:cw,height:ch});

    //点击背景遮罩移除iframe和背景
    $("#content_detail_bg").click(function() {
        $("#content_detail").remove();
        $("#content_detail_bg").remove();
    });
}

简单的说明一下： 如果想让弹出层位于最上层，那么就要设置style中 z-index:auto auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:9999。 若定义为-1，代表为最底层。 除了点击背影退出弹出层外，我们还可以用下面的方法退出，监控键盘上的ESC，当用户按了ESC后，则退出弹出层。

//按esc的时候退出tableau的详细展示页面
    $(document).keyup(function(event){
        switch(event.keyCode) {
            case 27:
                $("#tableau_detail").remove();
                $("#tableau_detail_bg").remove();
        }

    });

当然对于关闭窗口我们可以在iframe打开的窗口左上角加一个"点击关闭"的按钮，点击时窗口关闭，具体实现如下

function showTableau(url){
    //添加iframe
    var if_w = window.screen.availWidth-100;
    var if_h = window.screen.availHeight-50;
    //allowTransparency='true' 设置背景透明
    $("<div><a id='close_win' style='position:absolute;z-index:9999;'>点击关闭</a><iframe style='position:absolute;z-index:9998;' width='" + if_w + "' height='" + if_h + "' id='content_detail' name='content_detail'  frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'></iframe></div>").prependTo('body');
    var st=document.documentElement.scrollTop|| document.body.scrollTop;//滚动条距顶部的距离
    var sl=document.documentElement.scrollLeft|| document.body.scrollLeft;//滚动条距左边的距离
    var ch=window.screen.availHeight;//屏幕的高度
    var cw=window.screen.availWidth;//屏幕的宽度
    var objH=$("#content_detail").height();//浮动对象的高度
    var objW=$("#content_detail").width();//浮动对象的宽度
    var objT=Number(st)+(Number(ch)-Number(objH))/2;
    var objL=Number(sl)+(Number(cw)-Number(objW))/2;
    $("#content_detail").css('left',objL);
    $("#content_detail").css('top',objT);
    $("#content_detail").attr("src", url)
    $("#close_win").css('left',objL);
    $("#close_win").css('top',objT);

    //添加背景遮罩
    $("<div id='content_detail_bg' style='background-color: black;display:block;z-index:9997;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>").prependTo('body');
    $("#content_detail_bg").css({width:cw,height:ch});

    //点击背景遮罩移除iframe和背景
    $("#content_detail_bg").click(function() {
        $("#content_detail").remove();
        $("#content_detail_bg").remove();
    });
    //点击关闭时移除iframe和背影
    $('#close_win').click(function(){
        $("#content_detail").remove();
        $("#content_detail_bg").remove();
        $('#close_win').css('display','none');
    });
}

修改的地方就是加了一个<a>，然后对它进行操作。

转载于:https://my.oschina.net/sucre/blog/715322