还不能自适应大小
garyBox.js
// JavaScript Document
// gary 2014-3-27
// 加了 px 在google浏览器没加这个发现设置width 和height没有用 //gary 2014-3-27 //实在不会用那些JS框架,自己弄个,我只是想要个可以加载其它页面的对话框而以,这里用了别人的代码,不过不记得来源了 //关闭那两个字可能乱码,自己另存下,这个是utf8没问题 //调用 /// //<a href="#" onclick="showGaryBox('弹窗','http://www.baidu.com',function(){alert('窗口关闭!')})">弹窗</a> /// var garyBox ; var garyBoxHead; var garyBoxTitleText; var garyBoxClose; var garyBoxIframe; function createGaryBox() { document.body.innerHTML+="<div id="garyBox" style="display:none"><div id="garyBoxHead"><h4 ><span id="garyBoxTitleText">title</span></h4><h4><span id="garyBoxClose">关闭</span></h4></div><div><iframe id="garyBoxIframe" name="garyBoxIframe" width="100%" height="100%" frameBorder="0" frameSpacing="0" scrolling="auto" marginHeight="0" marginWidth="0" ></iframe></div></div>"; garyBox = document.getElementById("garyBox"); garyBox.style.cssText="border:1px solid #369;400px;height:250px;background:#e2ecf5;z-index:1000;position:absolute;display:none;"; garyBoxHead=document.getElementById("garyBoxHead"); garyBoxHead.style.cssText="height:20px;background:#369;color:#fff;padding:5px 0 0 5px;"; garyBoxTitleText=document.getElementById("garyBoxTitleText"); garyBoxTitleText.style.cssText="float:left;"; garyBoxClose = document.getElementById("garyBoxClose"); garyBoxClose.style.cssText="cursor:pointer;float:right; margin-right:10px;"; garyBoxIframe=document.getElementById("garyBoxIframe"); } function showGaryBox(title,url,onClose,width,height) { if(!garyBox)createGaryBox(); if(!arguments[3]) width = 600; if(!arguments[4]) height = 300; garyBoxTitleText.innerHTML=title; <!--设置遮敝--> garyBox.style.display = "block"; garyBox.style.position = "absolute"; garyBox.style.top = "50%"; garyBox.style.left = "50%"; garyBox.style.marginTop = (-height/2)+"px"; garyBox.style.marginLeft = (-width/2)+"px"; garyBox.style.width=width+'px'; garyBox.style.height=height+'px'; garyBoxIframe.style.width=garyBox.style.width; garyBoxIframe.style.height=garyBox.style.height; var garyBoxBg = document.createElement("div"); garyBoxBg.setAttribute("id","garyBoxBg"); garyBoxBg.style.background = "#000"; garyBoxBg.style.width = "100%"; garyBoxBg.style.height = "100%"; garyBoxBg.style.position = "absolute"; garyBoxBg.style.top = "0"; garyBoxBg.style.left = "0"; garyBoxBg.style.zIndex = "500"; garyBoxBg.style.opacity = "0.3"; garyBoxBg.style.filter = "Alpha(opacity=30)"; document.body.appendChild(garyBoxBg); document.body.style.overflow = "hidden"; garyBoxClose.onclick = function() { garyBox.style.display = "none"; garyBoxBg.style.display = "none"; if(onClose) { onClose(); } } garyBoxIframe.style.margin=0; garyBoxIframe.style.padding=0; garyBoxIframe.src=url; garyBoxIframe.onload=function(){ } }