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


Posted in Javascript onMay 23, 2012
<!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>
Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
移动端js触摸事件详解
Sep 18 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 #Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 #Javascript
JavaScript基本编码模式小结
May 23 #Javascript
Javascript处理DOM元素事件实现代码
May 23 #Javascript
面向对象Javascript核心支持代码分享
May 23 #Javascript
Package.js  现代化的JavaScript项目make工具
May 23 #Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 #Javascript
You might like
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP钩子实现方法解析
2019/05/21 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue实现扫码功能
2020/01/17 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
中专毕业生自荐信范文
2013/11/28 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
八一演出活动方案
2014/02/03 职场文书
绿色城市实施方案
2014/03/19 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
详解Python中的for循环
2022/04/30 Python