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

无标题文档

选择经度:

document.getElementById("txtSelect").οnfοcus=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.οnunlοad=function(){

var windows = document.getElementById("window");

var title = document.getElementById("title");

var layer = document.getElementById("layer");

layer.onclick = windows.οnclick=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);

}