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

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. excel导出： mac safari对application/x-msdownload的支持不佳

    https://blog.csdn.net/lizeyang/article/details/8982155?locationNum=3&fps=1 http://tool.oschina.n ...

  2. BKL 大内核锁

    BKL 大内核锁 BKL是一种递归锁.一个进程可以多次请求一个锁,并不会像自旋锁那么产生死锁. BKL可以在进程上下文中. BKL是有害的. 在内核中不鼓励使用BKL.一个执行线程可以递归的请求锁lo ...

  3. signal信号

    1.signal信号调试 http://hongjiang.info/shell-script-background-process-ignore-sigint/

  4. MySQL Inception--原理和注意事项

    ========================================================= MySQL Inception原理图 ======================= ...

  5. leetcode:Pascal's Triangle【Python版】

    1.这道题一次提交就AC了: 2.以前用C语言实现的话,初始化二维数组全部为0,然后每行第一个元素为1,只需要用a[i][j] = a[i-1][j]+a[i-1][j-1]就可以了: 3.在Pyth ...

  6. linux日志分析

    转一位大神的笔记. 日志管理: 1.基于服务的 2.基于时间的 /var/log/wtmp,/var/run/utmp,/var/log/lastlog(lastlog),/var/log/btmp( ...

  7. 如何调试触发器-MSSQL (转帖)

    调试触发器 //------------------------------------- 作者:四海为圈(原创) //------------------------------------- 1. ...

  8. Oracle RAC的机制与测试方法

    Oracle RAC的机制与测试方法 标签: rac 机制 测试 2016-05-25 09:54 1150人阅读 评论(0) 收藏 举报  分类: oracle(2)  1.RAC原理 Oracle ...

  9. js实现loading简单的遮套层

    弹出个div  设置div的背景色及透明度当加载完成后remove这个div  或者 隐藏至于淡入淡出通过setTimeout 或者setInterval改变透明度试试 .test{     widt ...

  10. Spring Boot + Jpa(Hibernate) 架构基本配置

    本文转载自:https://blog.csdn.net/javahighness/article/details/53055149 1.基于springboot-1.4.0.RELEASE版本测试 2 ...