自己做的模拟模态对话框
自己做的模拟模态对话框<div class="postText"><div id="cnblogs_post_body">DEMO演示，请猛击
最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西。
<div class="cnblogs_code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><input type="button"value="test" style="height:500px" />选择经度:<input type="text" id="txtSelect" /><iframe name="map" src="baidumap.htm" id="map" style="display:none"></iframe><body></body></html><script type="text/javascript"> document.getElementById("txtSelect").onfocus=function(){ var windows = document.getElementById("window"); var title = document.getElementById("title"); var layer = document.getElementById("layer"); if(windows==null&&layer==null&&title==null){ var style = document.createElement("style"); style.type="text/css"; document.body.appendChild(style); var styleText = "#layer{ width:100%;height:100%;background:#000000;position:absolute;z-index:100;left:0;top:0;filter:alpha(opacity=40); opacity:0.4}"; styleText+="#window{position:absolute; z-index:1000;background:#ffc;}"; styleText+="#title{ background:#CCFFFF;width:100%;height:15%;font-size:2em;font-weight:bold; text-align:left; line-height:1.5em }" styleText+="#content{ height:85%;width:100%;background:#CCCCCC}"; styleText+="#frame{ width:100%;height:100%;} #map{ width:100%;height:100%}"; try{ if(typeof style.styleSheet.cssText!="undefined"){ style.styleSheet.cssText=styleText; } }catch(ex){ style.appendChild(document.createTextNode(styleText)); } var layer = document.createElement("div"); document.body.appendChild(layer); layer.id="layer"; var windows = document.createElement("div"); document.body.appendChild(windows); windows.id="window"; windows.style.height="400px"; windows.style.width = "600px"; var height = parseInt(windows.style.height); var width = parseInt(windows.style.width); windows.style.top = parseInt(document.documentElement.clientHeight/2-height/2)+"px"; windows.style.left = parseInt(document.documentElement.clientWidth/2-width/2)+"px"; var title = document.createElement("div"); windows.appendChild(title); title.id="title"; title.appendChild(document.createTextNode("点此关闭")); var content = document.createElement("div"); windows.appendChild(content); content.id="content"; var map = document.getElementById("map"); content.appendChild(map); map.style.display="block"; if(typeof layer.style.opacity!="undefined"){ layer.style.opacity=0.5; } else if(typeof layer.style.filter!="undefined"){ layer.style.filter="alpha(opacity=50)"; } } else{ if(typeof layer.style.opacity!="undefined"){ layer.style.opacity=0.5; } else if(typeof layer.style.filter!="undefined"){ layer.style.filter="alpha(opacity=50)"; } layer.style.zIndex=100; windows.style.zIndex=1000; layer.style.display="block"; windows.style.display="block"; } layer.onclick = title.onclick = function(){ windows.style.zIndex=-1000; windows.style.display="none"; //让层渐隐 var timer = setTimeout(displayLayer,200); function displayLayer(){ if(typeof layer.style.opacity!="undefined"){ var layers = document.getElementById("layer"); var opacity = parseFloat(layers.style.opacity); opacity = opacity-0.1; if(opacity>0){ setTimeout(arguments.callee,100); } else if(opacity<0){ layers.style.zIndex=-100; clearTimeout(timer); } layers.style.opacity = opacity; } else if(typeof layer.style.filter!="undefined"){ var layers = document.getElementById("layer"); var filterStyle = layers.style.filter; //opacity = parseInt(filterStyle.substring(filterStyle.indexOf("=")+1)); var opacity = parseInt(filterStyle.match(/\d+/)); opacity = opacity-10; if(opacity>0){ setTimeout(arguments.callee,100); } else if(opacity<0){ layers.style.zIndex=-100; clearTimeout(timer); } layers.style.filter = "alpha(opacity="+opacity+")"; } else{ throw new Error("your browser version lower!"); } } document.getElementById("txtSelect").value=frames["map"].document.getElementById("hidden").value; } } window.onunload=function(){ var windows = document.getElementById("window"); var title = document.getElementById("title"); var layer = document.getElementById("layer"); layer.onclick = windows.onclick=null;//清除事件绑定 document.body.removeChild(layer); windows.removeChild(title); document.body.removeChild(windows); }</script>
页:
[1]