自己做的模拟模态对话框
最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西。
<!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>
这是那个框架的页面，显示百度地图的坐标
<html> <head> <meta http-equiv="Content-Type" content="text ml; charset=utf-8"> <title>百度地图</title> <script type="text/javascript" src=" http://api.map.baidu.com/api?key=458d39374361da27e548367a735831ba&v=1.0&services=true"></script> <link href="/Theme/Default/Admin/reset.css" rel="stylesheet" type="text/css" /> <link href="/Theme/Default/Admin/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <form> <div style="position: absolute; width: 730px; height: 590px; top: 35; left: 0; border: 1px solid gray; overflow-y: hidden;" id="container"> </div> <input id="text_" class="textbox200" style="width: 150px" type="text" value="成都" /> <input class="button90" type="button" value="查询" onClick="searchByStationName(document.getElementById('text_').value);" /> <input type="hidden" id="hidden" value="104.105, 30.624" /> </form> </div> </body> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(104.105, 30.624), 6); map.addControl(new BMap.NavigationControl()); //导航 map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addEventListener("click", function (e) { document.getElementById("hidden").value = e.point.lng+","+e.point.lat; }); var localSearch = new BMap.LocalSearch(map, { renderOptions: { pageCapacity: 8, autoViewport: true, selectFirstResult: false } }); localSearch.enableAutoViewport(); function searchByStationName(name) { var keyword = name; localSearch.setSearchCompleteCallback(function (searchResult) { var poi = searchResult.getPoi(0); alert(poi.point.lng + " " + poi.point.lat); document.getElementById("hidden").value = e.point.lng+","+e.point.lat; map.centerAndZoom(poi.point, 8); }); localSearch.search(keyword); } </script> </html>
