DIY 시뮬레이션 모달 대화 상자 구현 code_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(스타일); var styleText = "#layer{ 너비:100%; 높이:100%;배경:#000000;위치:절대;z-index:100;왼쪽:0;상단:0;필터:알파(불투명도=40 ) 불투명도:0.4}"; styleText ="#window{위치:절대; z-색인:1000;배경:#ffc;}"; styleText ="#제목{ 배경:#CCFFFF;너비:100%;높이:15%;폰트-크기:2em;폰트-가중치:bold; 텍스트-정렬:왼쪽; 줄 높이:1.5em }" styleText ="#content{ 높이:85%;너비:100%;배경:#CCCCCC}"; styleText ="#frame{ width:100%;height:100%;} #map{ width:100%;height:100%}"; 시도해 보세요{ if(typeof style.styleSheet.cssText!="정의되지 않음"){ style.styleSheet.cssText=styleText; } }catch(ex){ style.appendChild(document.createTextNode(styleText)); } var layer = document.createElement("div"); document.body.appendChild(레이어); layer.id="레이어"; var windows = document.createElement("div"); document.body.appendChild(창); windows.id="창"; windows.style.height="400px"; windows.style.width = "600px"; var height =parseInt(windows.style.height); var width =parseInt(windows.style.width); windows.style.top = parsInt(document.documentElement.clientHeight/2-height/2) "px"; windows.style.left = parsInt(document.documentElement.clientWidth/2-width/2) "px"; var title = document.createElement("div"); windows.appendChild(제목); title.id="제목"; title.appendChild(document.createTextNode("点此关闭")); var content = document.createElement("div"); windows.appendChild(content); content.id="content"; var map = document.getElementById("map"); content.appendChild(지도); map.style.display="block"; if(typeof layer.style.opacity!="정의되지 않음"){ layer.style.opacity=0.5; } else if(typeof layer.style.filter!="정의되지 않음"){ layer.style.filter="alpha(opacity=50)"; } } else{ if(typeof layer.style.opacity!="undefine"){ layer.style.opacity=0.5; } else if(typeof layer.style.filter!="정의되지 않음"){ layer.style.filter="alpha(opacity=50)"; } layer.style.zIndex=100; windows.style.zIndex=1000; layer.style.display="블록"; windows.style.display="차단"; } layer.onclick = title.onclick = function(){ windows.style.zIndex=-1000; windows.style.display="없음"; //让层渐隐 var 타이머 = setTimeout(displayLayer,200); function displayLayer(){ if(typeof layer.style.opacity!="undefine"){ varlayers = document.getElementById("layer"); var opacity =parseFloat(layers.style.opacity); 불투명도 = 불투명도-0.1; if(opacity>0){ setTimeout(arguments.callee,100); } else if(opacity layers.style.zIndex=-100; clearTimeout(타이머); } layers.style.opacity = 불투명도; } else if(typeof layer.style.filter!="undefine"){ varlayer = document.getElementById("layer"); var filterStyle = 레이어.스타일.필터; //opacity = parsInt(filterStyle.substring(filterStyle.indexOf("=") 1)); var opacity =parseInt(filterStyle.match(/d /)); 불투명도 = 불투명도-10; if(opacity>0){ setTimeout(arguments.callee,100); } else if(opacity layers.style.zIndex=-100; clearTimeout(타이머); } layers.style.filter = "alpha(opacity=" opacity ")"; } else{ throw new Error("브라우저 버전이 낮습니다!"); } } 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); .body.removeChild(windows); } 바이두 지도의 좌표를 보여주는 페이지입니다 코드 복사 코드는 다음과 같습니다. 메타 http-equiv ="Content-Type" content="text ml; charset=utf-8"> Baidu 지도 var map = new BMap.Map("container"); >map.centerAndZoom(new BMap.Point(104.105, 30.624), 6); map.addControl(new BMap.NavigationControl()) //Navigation 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 키워드 = name; (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(키워드)