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

复制代码 代码如下:

  <!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>