用div+iframe作彈窗

用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>，而後對它進行操做。