其实想做的就是显示百度地图的弹出层，现在已经简单实现了。示例和代码如下，点击按钮可以看到效果：

1.示例:

 

2.代码：

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

             <link href="css/css.css" rel="stylesheet" type="text/css" />

             <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=A8773a52f6d9bc0ecaea7f15acdd13e0"></script>

              <script type="text/javascript">

              //显示百度地图弹出层

                  function divtoshow() {

                      div_show = document.getElementById("div_show");

                      div_show.innerHTML = "<div class=\"div_show_title\"> <span class=\"div_show_font\">地图</span> <input type=\"button\" value=\"关闭\" onclick=\"close_show();\" class=\"div_show_btn\" /> </div><div id=\"div_hotelmap\" ></div>";

                      getshade();

                      getpopup();

                      getbaidumap(116.404, 39.915);

                      div_show.style.zIndex = "100";

                      div_show.style.display = "block";

                  }

                  //创建遮罩层

                  function getshade() {

                      var div = document.createElement("div");

                      div.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";

                      div.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";

                      div.style.backgroundColor = "#000000";

                      div.style.position = "absolute";

                      div.style.opacity = 0.5;

                      div.style.left = 0;

                      div.style.top = 0;

                      div.id = "tohotelshade";

                      div.style.zIndex = 100;

                      document.getElementById("div_body").appendChild(div);

                  }

                  //创建用于显示百度地图的DIV

                  function getpopup() {

                      var div = document.createElement("div");

                      div.style.width = "100%";

                      div.style.height = "100%";

                      div.id = "tohotelmap";

                      document.getElementById("div_hotelmap").appendChild(div);

                  }

                  //清除弹出层和遮罩层

                  function close_show() {

                      var tohotelshade = document.getElementById("tohotelshade");

                      var tohotelmap = top.document.getElementById("tohotelmap");

                      var div_show = document.getElementById("div_show");

                      var div_hotelmap = document.getElementById("div_hotelmap");

                      div_show.style.zIndex = "-100";

                      tohotelshade.parentNode.removeChild(tohotelshade);

                      tohotelmap.parentNode.removeChild(tohotelmap);

                      div_show.innerHTML = "";

                  }

                  //通过经纬度显示百度地图

             function getbaidumap(Longitude,Latitude) {

              var map = new BMap.Map("tohotelmap");

              var point = new BMap.Point(Longitude,Latitude);

              map.centerAndZoom(point, 14);

              var marker = new BMap.Marker(point);        // 创建标注

              map.addOverlay(marker);                     // 将标注添加到地图中

             map.addControl(new BMap.NavigationControl());

             map.addControl(new BMap.ScaleControl());

             map.addControl(new BMap.OverviewMapControl());

             map.addControl(new BMap.MapTypeControl());

        }

</script>  

       </head>

       <body>

       <div id="div_body">

       <input type="button" value="click" onclick="divtoshow()" />

       </div>   

       <div id="div_show"> </div>

  </body>

</html>

3.样式：

#div_show

{

    height: 400px;

    left: 80px;

    position: fixed;

    top: 88px;

    width: 80%;

    z-index: -100;

}

.div_show_title

{

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#12a3f4', endColorstr='#0e86c9', GradientType=0);

    clear: both;

    display: block;

    background: rgb(14, 134, 201);

    color: #FFFFFF;

    font-weight:;

    position: relative;

    height: 30px;

    width: 100%;

}

.div_show_font

{

    color: #FFFFFF;

    float: left;

    font-weight:;

    margin: 0.4em 0 0.4em 10px;

}

.div_show_btn

{

    float: right;

    margin: 0.4em 10px 0.4em 0;

}

#div_hotelmap

{

    height: 360px;

    border: 5px solid white;

}

【Javascript Demo】遮罩层和百度地图弹出层简单实现的更多相关文章

  1. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  2. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  6. OA项目之弹出层中再弹出层

    弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...

  7. 弹出层和ajax数据交互

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  8. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  9. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

随机推荐

  1. jsp内置对象request 和response

    1.request对象主要用于处理客户端的请求 request对象常用方法 一.String  request.getParameter(String name)             根据页面表单 ...

  2. TP3.2整合kindeditor

    HTML   <!-- KE图片上传 --> <link rel="stylesheet" href="__PUBLIC__/kindeditor/th ...

  3. leetcode:Count and Say【Python版】

    一次AC 字符串就是:count+char class Solution: # @return a string def countAndSay(self, n): str = " for ...

  4. x86函数调用约定

    以下摘自<IDA Pro>,貌似有一些细节之处没有交代清楚呢,需要进一步思考.实践. 了解栈帧的基本概念后,接下来详细介绍它们的结构.下面的例子涉及x86体系结构和与常见的x86编译器(如 ...

  5. zz 史上最全--各银行借记卡的年费、小额管理费、转账费等！

    史上最全--各银行借记卡的年费.小额管理费.转账费等! 发布时间:2015-01-14 17:28:10 还在迷茫借记卡自费的菜主儿们~菜菜特别整理关于各银行借记卡.存折账户等的年费.小额管理费.转账 ...

  6. WeakHashMap 理解

    WeakHashMap 通过 expungeStaleEntries 这个函数的来实现:移除其内部不用的条目,从而达到自动释放内存的目的. 基本上只要对 WeakHashMap 的内容进行访问就会调用 ...

  7. 字符设备之register_chrdev与register_chrdev_region(转)

    之前写字符设备驱动,都是使用register_chrdev向内核注册驱动程序中构建的file_operations结构体,之后创建的设备文件,只要是主设备号相同(次设备号不同),则绑定的都是同一个fi ...

  8. 添加pptp、l2tp客户端

    一.编译 -> Network -> Network ->VPN 二.配置 1. L2TP配置 network配置文件增加: config interface 'vpn1' opti ...

  9. nginx负载

    一. Nginx反向代理与负载均衡概念简介 • 严格地说,Nginx仅仅是作为Nginx Proxy反向代理使用的,因为这个反向代理功能表现的效果是负载均衡集群的效果,所以本文称之为Nginx负载均衡 ...

  10. Appscan_web安全测试工具 (含修改启动浏览器的方法)

    安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄弟” ...