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

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. [LOJ6029~6052]雅礼集训 2017 选做

    Link 代码可以在loj上看我的提交记录. Day 1 [LOJ6029]市场 对于一次除法操作,若区间内所有数的减少量均相同则可视作区间减法,否则暴力递归下去.显然一个线段树节点只会被暴力递归进去 ...

  2. 【spring源码分析】面向切面编程架构设计

    2 注解说明 2.1 @Aspect 作用是把当前类标识为一个切面供容器读取 2.2 @Before标识一个前置增强方法,相当于BeforeAdvice的功能,相似功能的还有 2.3 @AfterRe ...

  3. 剑指offer-矩形覆盖-斐波那契数列(递归，递推)

    class Solution { public: int rectCover(int number) { if(number==0 || number==1||number==2) return nu ...

  4. asp.net excel 操作

    /// <summary> /// 数据操作 /// </summary> /// <param name="fileName"></pa ...

  5. JUC集合之 ConcurrentSkipListSet

    ConcurrentSkipListSet介绍 ConcurrentSkipListSet是线程安全的有序的集合,适用于高并发的场景. ConcurrentSkipListSet和TreeSet,它们 ...

  6. centos6/7安装gitlab

    CentOS/RHEL 6/7安装gitlab新建 /etc/yum.repos.d/gitlab-ce.repo,内容为你的CentOS/RHEL版本:centos6 [gitlab-ce] nam ...

  7. Angular 4 模板表单校验

    1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSub ...

  8. jquery tmpl学习资料 --{{each}} each使用

    <!DOCTYPE html><html><head>    <script src="Scripts/jquery-1.6.2.min.js&qu ...

  9. Android Studio 默认keystore 以及自定义keystore

    我们使用Android Studio 运行或测试我们的app  它使用一个默认的debug.keystore进行签名. 这个默认签名(keystore)是不需要密码的,它的默认位置在 $HOME/.a ...

  10. C/C++基础----string, vector, array

    1 using声明 方便使用命名空间中的成员,不用每次xxx::yyy 头文件不应该包含using声明(不经意间包含了一些名字) 2 string 表3.1:初始化string对象的方式 string ...