用div和iframe做一个弹出层，在弹出层显示指定url的内容，这样的好处是，不用考虑真正窗口的地址栏、工具栏等事情，看代码function showContent(url){ //添加ifr
用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:autoauto可定义为一个值(整数数字)，越大代表越置前，如可定义为： 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>，然后对它进行操作。
