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


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插件之多图片异步上传
Oct 20 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JS排序之快速排序详解
Apr 08 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
浅谈Vue的computed计算属性
Mar 21 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
php启用zlib压缩文件的配置方法
2013/06/12 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
从零学Python之入门(三)序列
2014/05/25 Python
python中os模块详解
2016/10/14 Python
使用python实现ANN
2017/12/20 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
就业意向书
2014/07/29 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python