商城类网站建设需要多少钱/公司网站推广运营

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

function showContent(url){//添加iframevar 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){//添加iframevar 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>，然后对它进行操作。