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


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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 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反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
深入了解js原型模式
2019/05/30 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
python删除不需要的python文件方法
2018/04/24 Python
python中的字符串内部换行方法
2018/07/19 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python 如何实现遗传算法
2020/09/22 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
运动会广播稿200米
2014/01/27 职场文书
小学语文教研活动总结
2014/07/01 职场文书
会议室管理制度范本
2015/08/06 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
MySQL基于索引的压力测试的实现
2021/11/07 MySQL