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


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 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 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
基于mysql的论坛(7)
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
幼儿园教师岗位职责
2014/03/17 职场文书
中学生演讲稿
2014/04/26 职场文书
入党积极分子评语
2014/05/04 职场文书
会计学自荐信
2014/06/03 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Golang解析JSON对象
2022/04/30 Golang