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


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使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
解决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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python实现身份证号码解析
2015/09/01 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
实例讲解python中的协程
2018/10/08 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python flask框架post接口调用示例
2019/07/03 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
网络技术专业求职信
2014/02/18 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
文员岗位职责
2015/02/04 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android