自己做的模拟模态对话框实现代码
2023-06-13 09:14:33 时间
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<inputtype="button"value="test"style="height:500px"/>
选择经度:<inputtype="text"id="txtSelect"/>
<iframename="map"src="baidumap.htm"id="map"style="display:none"></iframe>
<body>
</body>
</html>
<scripttype="text/javascript">
document.getElementById("txtSelect").onfocus=function(){
varwindows=document.getElementById("window");
vartitle=document.getElementById("title");
varlayer=document.getElementById("layer");
if(windows==null&&layer==null&&title==null){
varstyle=document.createElement("style");
style.type="text/css";
document.body.appendChild(style);
varstyleText="#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(typeofstyle.styleSheet.cssText!="undefined"){
style.styleSheet.cssText=styleText;
}
}catch(ex){
style.appendChild(document.createTextNode(styleText));
}
varlayer=document.createElement("div");
document.body.appendChild(layer);
layer.id="layer";
varwindows=document.createElement("div");
document.body.appendChild(windows);
windows.id="window";
windows.style.height="400px";
windows.style.width="600px";
varheight=parseInt(windows.style.height);
varwidth=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";
vartitle=document.createElement("div");
windows.appendChild(title);
title.id="title";
title.appendChild(document.createTextNode("点此关闭"));
varcontent=document.createElement("div");
windows.appendChild(content);
content.id="content";
varmap=document.getElementById("map");
content.appendChild(map);
map.style.display="block";
if(typeoflayer.style.opacity!="undefined"){
layer.style.opacity=0.5;
}
elseif(typeoflayer.style.filter!="undefined"){
layer.style.filter="alpha(opacity=50)";
}
}
else{
if(typeoflayer.style.opacity!="undefined"){
layer.style.opacity=0.5;
}
elseif(typeoflayer.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";
//让层渐隐
vartimer=setTimeout(displayLayer,200);
functiondisplayLayer(){
if(typeoflayer.style.opacity!="undefined"){
varlayers=document.getElementById("layer");
varopacity=parseFloat(layers.style.opacity);
opacity=opacity-0.1;
if(opacity>0){
setTimeout(arguments.callee,100);
}
elseif(opacity<0){
layers.style.zIndex=-100;
clearTimeout(timer);
}
layers.style.opacity=opacity;
}
elseif(typeoflayer.style.filter!="undefined"){
varlayers=document.getElementById("layer");
varfilterStyle=layers.style.filter;
//opacity=parseInt(filterStyle.substring(filterStyle.indexOf("=")+1));
varopacity=parseInt(filterStyle.match(/\d+/));
opacity=opacity-10;
if(opacity>0){
setTimeout(arguments.callee,100);
}
elseif(opacity<0){
layers.style.zIndex=-100;
clearTimeout(timer);
}
layers.style.filter="alpha(opacity="+opacity+")";
}
else{
thrownewError("yourbrowserversionlower!");
}
}
document.getElementById("txtSelect").value=frames["map"].document.getElementById("hidden").value;
}
}
window.onunload=function(){
varwindows=document.getElementById("window");
vartitle=document.getElementById("title");
varlayer=document.getElementById("layer");
layer.onclick=windows.onclick=null;//清除事件绑定
document.body.removeChild(layer);
windows.removeChild(title);
document.body.removeChild(windows);
}
</script>
这是那个框架的页面,显示百度地图的坐标
<html>
<head>
<metahttp-equiv="Content-Type"content="textml;charset=utf-8">
<title>百度地图</title>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?key=458d39374361da27e548367a735831ba&v=1.0&services=true"></script>
<linkhref="/Theme/Default/Admin/reset.css"rel="stylesheet"type="text/css"/>
<linkhref="/Theme/Default/Admin/style.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<div>
<form>
<divstyle="position:absolute;width:730px;height:590px;top:35;left:0;border:1pxsolidgray;overflow-y:hidden;"id="container">
</div>
<inputid="text_"class="textbox200"style="width:150px"type="text"value="成都"/>
<inputclass="button90"type="button"value="查询"onClick="searchByStationName(document.getElementById("text_").value);"/>
<inputtype="hidden"id="hidden"value="104.105,30.624"/>
</form>
</div>
</body>
<scripttype="text/javascript">
varmap=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(104.105,30.624),6);
map.addControl(newBMap.NavigationControl());//导航
map.addControl(newBMap.ScaleControl());
map.addControl(newBMap.OverviewMapControl());
map.addEventListener("click",function(e){
document.getElementById("hidden").value=e.point.lng+","+e.point.lat;
});
varlocalSearch=newBMap.LocalSearch(map,{
renderOptions:{
pageCapacity:8,
autoViewport:true,
selectFirstResult:false
}
});
localSearch.enableAutoViewport();
functionsearchByStationName(name){
varkeyword=name;
localSearch.setSearchCompleteCallback(function(searchResult){
varpoi=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>
相关文章
- 用php的CURL模拟登录正方教务系统
- 用COPULA模型进行蒙特卡洛(MONTE CARLO)模拟和拟合股票收益数据分析|附代码数据
- Java模拟斗地主代码实现
- 用模拟执行实现Objective-C代码自动化分析
- 生命游戏的模拟代码
- 欧盟「人脑计划」最新进展:新算法模拟生物进化,为大脑如何工作提供新见解
- PYTHON 用几何布朗运动模型和蒙特卡罗MONTE CARLO随机过程模拟股票价格可视化分析耐克NKE股价时间序列数据|附代码数据
- 用COPULA模型进行蒙特卡洛(MONTE CARLO)模拟和拟合股票收益数据分析|附代码数据
- Python模拟键盘输入和鼠标操作详解编程语言
- Python在windows下模拟按键和鼠标点击代码详解编程语言
- 模拟网络Linux QEMU 模拟网络:利用新技术打造智能网络(linuxqemu)
- 特性模拟 Redis 的强大特性体验之旅(模拟redis)
- 模拟弹出菜单的代码
- js模拟实现类似c#下的hashtable的简单功能代码
- asp.netASPxTextBox等控件实现"回车模拟Tab"的常用代码整理
- jQuery的实现原理的模拟代码-4重要的扩展函数extend
- jQuery实现原理的模拟代码-6代码下载
- 用js模拟JQuery的show与hide动画函数代码
- javascript类和命名空间的模拟代码
- php中通过curl模拟登陆discuz论坛的实现代码
- jQuery模拟超链接点击效果代码
- Android应用开发中模拟按下HOME键的效果(实现代码)
- C#winfrom模拟ftp文件管理实现代码
- python3.3教程之模拟百度登陆代码分享
- python模拟登陆阿里妈妈生成商品推广链接