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

代码如下:

<!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>

赞 (0)

相关推荐

  • C和MFC巧妙获取外网IP的两种实现方法

    本文以C与MFC的两个实例详述了取外网IP的两种实现方法,具体实现代码如下: MFC语言实现获取外网IP: # include <windows.h> # include <urlmon.h> # pragma comment(lib,"URLMON.lib") void main() { URLDownloadToFile(NULL,"http://www.ip138.com/ip2city.asp","ip.txt",

  • MFC命名规则汇总

    本文汇总了MFC中消息.控件.对话框等等的命名规则,作为初学者应详细了解并遵守这类规则.详细规则如下所示: 一.MFC中ID 编号原则: IDC_:控件的ID命名前缀(Control) IDM_:菜单的ID命名前缀(Menu) IDD_:对话框的ID命名前缀(Dialog) IDR_:资源的ID命名前缀(Resource) IDS_:字符串的ID命名前缀(String) IDB_:位图资源的ID命名前缀(Bitmap) 二.MFC系统消息前缀小集 ABM        应用程序桌面工具条appl

  • VC中SDK与MFC的区别浅析

    本文浅析了vc中SDK与MFC的区别,对于初学VC的朋友有一定的学习借鉴价值,详情如下: SDK 是指Software Development Kit 软件开发包 MFC 是指Microsoft Foundation Classes 微软函数类库 因此MFC是对API函数的封装,也算是vc里的SDK   用VC编写Windows程序有两种:1. Windwos c方式(SDK),2.C++方式:即对SDK函数进行包装,如VC的MFC,BCB的OWL等. SDK编程就是直接调用Windows的AP

  • MFC创建模态对话框和非模态对话框的方法

    在MFC中对话框有两种形式,一个是模态对话框(model dialog box),一个是非模态对话框(modeless dialog box).本文对此分别简述其创建方法. 一.模态对话框(model dialog box) 在程序运行的过程中,若出现了模态对话框,那么主窗口将无法发送消息,直到模态对话框退出才可以发送. 点击模态对话框中的OK按钮,模态对话框会被销毁. 创建一个模态对话框的代码如下所示: //创建一个模态对话框 CTestDialog td; td.DoModal(); 其中C

  • MFC实现全屏功能代码实例

    windows应用程序中有很多的播放器都有快捷键控制窗口以全屏幕的方式显示.MFC实现给应用程序加上全屏幕的功能,并不需要很多的代码,比如给一个基于对话框的应用程序加上全屏功能只需要以下少量代码就可以实现了. 实现代码如下所示: void CFullScreenDlg::FullScreenView(void) { RECT rectDesktop; WINDOWPLACEMENT wpNew; if (!IsFullScreen()) { // We'll need these to rest

  • VC MFC非模态对话框的实现方法

    众所周知的,MFC中非模态对话框在显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本文就来给大家讲解一下非模态对话框的实现方法: 一.非模态对话框的对话框资源和对话框类 实际上,模态对话框和非模态对话框在创建对话框资源和生成对话框类上是没有区别的,因此,在创建模态对话框时所创建的IDD_TIP_DIALOG对话框资源和CTipDlg类都不需要修改. 二.创建及显示非模态对话框的步骤 需要修改的是,对话框类实例的创建和显示,也就是之前在CAdditionDlg::OnBnCli

  • showModalDialog模态对话框的使用详解以及浏览器兼容

    1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了).可以在子窗口中通过设置window.returnValue的值,让父窗口可以获取这个returnvalue. 2.一个例子1)主窗口main.html,2)在主窗口中通过showModalDialog的方式打开子窗口sub.html3)在子窗口中设置ret

  • MFC自定义消息的实现方法

    一.概述: 消息机制是windows程序的典型运行机制,在MFC中有很多已经封装好了的消息,如WM_BTN**等.但是在有些特殊情况下我们需要自定义一些消息去完成一些我们所需要的功能,这时候MFC的向导不能帮助我们做到这一点.对此,我们可以通过添加相应的代码去完成这个功能. 二.实现方法: 添加自定义消息操作如下: 1. 建立MFC工程,如基于对话框的应用程序,Test. 2. 在资源中添加要处理的消息的值,即在CTestDlg.h中添加 如下代码. (因为很多MFC的消息是在WM_USER内的

  • 构建mfc窗体的简单示例

    复制代码 代码如下: #include<afxwin.h>//包含MFC头文件//从MFC的主要框架窗体派生用户窗体类class CMyWnd:public CFrameWnd{public: CMyWnd(LPCTSTR szTitle) {  //调用父类Create函数创建窗体  Create(NULL,szTitle); }};//从MFC的应用程序派生用户程序类class CMyApp:public CWinApp{public: virtual BOOL InitInstance(

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

    复制代码 代码如下: <!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=&qu

  • js实现div模拟模态对话框展现URL内容

    本文实例讲述了js实现div模拟模态对话框展现URL内容.分享给大家供大家参考,具体如下: <script> function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口

  • 利用javascript打开模态对话框(示例代码)

    利用javascript打开模态对话框(示例代码)

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript">   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig

  • ModelDialog JavaScript模态对话框类代码

    ModelDialog JavaScript模态对话框类代码

    /** * JavaScript ModelDialog v0.1 * * new ModelDialog({ * caption 标题 '对话框标题'(默认) * template 主体内容 ''(默认) * dialogCls 对话框className 'md-dialog'(默认) * headCls 头部className 'md-head'(默认) * btnCloseCls 关闭按钮className 'md-close'(默认) * bodyCls 主体className 'md-

  • Qt专栏之模态与非模态对话框的实现

    Qt专栏之模态与非模态对话框的实现

    一.概念介绍 什么是模态对话框和非模态对话框呢?我们日常使用软件过程中很常见的现象,点击某个软件上某个按钮会弹出对话框窗口,此时对于其他窗口而言: 可以同时对其他窗口进行操作的称为非模态: 不可以同时,只能操作当前弹出的窗口的称为模态. 二.代码示例 2.1模态对话框示例代码 /*在主类对象的构造函数中我们新建一个按钮用于弹出对话框*/ QPushButton *btn = new QPushButton("new",this); /*信号与槽的连接 槽函数通过Lambda表达式实现

  • asp.net下模态对话框关闭之后继续执行服务器端代码的问题

    最近做一个从Access项目向 Asp.net + SqlServer迁移工作,其中遇到了这种情况,在Access窗体的一个按钮事件中,代码大体上是这么个功能:弹出模态对话框,在关闭对话框之后继续走一段数据库操作代码. 在Asp.net里弹出模态对话框容易,但是在模态对话框关闭之后还要继续执行服务器代码,这就要求当对话框关闭之后页面要立即提交.于是有了以下的解决方法. 在Web Form中拖入服务器端按钮,并假设此按钮ID为 btnComput,在隐藏页面的 Page_Load 中用代码中这样写

  • Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    What?模态对话框失效了? 上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体,而且返回值returnValue也无法返回,一直是undefined.这么多问题很令人头疼,下面就各个主流最新版的浏览器进行了一下测试. 浏览器 是否支持 状态 IE9 ○ Firefox13.0 ○ safari5.1 ○ chrome19.0

  • Bootstrap3 多个模态对话框无法显示的解决方案

    Bootstrap3 多个模态对话框无法显示的解决方案

    今天帮同事调了一个代码,他们的项目最近在用Bootstrap做开发,突然间,他遇到了一个奇怪的问题,如果一个页面中,有多个Modal对话框的话,排列在第一个的对话框,能够正确显示,第二个,只能导致页面出现MASK层,却不能显示Dialog. 如果调整顺序,仍然是第一个能显示,第二个只有页面变暗.效果如下: 第一个,正常弹出的Dialog 第二个无法弹出,只是页面变暗的dialog 而两个dialog的代码是完全一致的,具体的代码如下: <div class="modal fade"

随机推荐