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

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. 《DSP using MATLAB》Problem 3.8

    2018年元旦,他乡加班中,外面尽是些放炮的,别人的繁华与我无关. 代码: %% ----------------------------------------------------------- ...

  2. hdu2602 DP （01背包）

    题意:有一个容量 volume 的背包,有一个个给定体积和价值的骨头,问最多能装价值多少. 经典的 01 背包问题不谈,再不会我就要面壁了. 终于有一道题可以说水过了 ……心好累 #include&l ...

  3. 剑指offer-特定二维数组中查找一个元素是否存在-二分搜索-二维数组

    int [][] array ={ {1,2,8,9}, {2,4,9,12}, {4,7,10,13}, {6,8,11,19} }; 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都 ...

  4. scanner 在java中的输入

    ************************************************************************************** 和C++的输入很像

  5. cin和cout详解

    无论输入数字还是字符串,一个回车键是把输入的这个东西送到变量中,可以一次性送到 一个(或者多个)空格键是分隔这些值的 cout <<N; for(int i=0;i<5;i++) { ...

  6. 使用MQ要考虑的问题

    一般现代软件系统都会用到MQ,几乎所有开发人员也都会想到用MQ,但真正能用好的人估计不多,因为要用好MQ有很多方面问题要考虑: 1.在原直接交互的系统间增加MQ中间层,MQ的性能.可靠程度会严重影响原 ...

  7. devExpress Gridview添加按钮或链接

    1.进入view设计 2.增加列 3.修改Repository中相关内容

  8. 洛谷1352没有上司的舞会——树型dp

    题目:https://www.luogu.org/problemnew/show/P1352 #include<iostream> #include<cstdio> using ...

  9. Mycat 数据库分库分表中间件

    http://www.mycat.io/ Mycat 国内最活跃的.性能最好的开源数据库中间件! 我们致力于开发高性能的开源中间件而努力! 实体书Mycat权威指南 »开源投票支持Mycat下载 »s ...

  10. 实际用户ID和有效用户ID (二)

    看UNIX相关的书时经常能遇到这几个概念,但一直没有好好去理清这几个概念,以致对这几个概念一直一知半解.今天好好区分了一下这几个概念并总结如下.说白了这几个UID引出都是为了系统的权限管理. 下面分别 ...