自己做的模拟模态对话框实现代码_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 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 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); } 这是那个框架的页面，显示百度地图的坐标 复制代码 代码如下: 百度地图 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); }

自己做的模拟模态对话框实现代码_javascript技巧

Artikel berkaitan