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

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. 自制数据结构（容器）-java开发用的最多的ArrayList和HashMap

    public class MyArrayList<E> { private int capacity = 10; private int size = 0; private E[] val ...

  2. stardog graphql 简单操作

    预备环境: 下载stardog 软件包 graphql 查询地址 创建一个简单数据库 ./stardog-admin db create -nstarwars graphql 查询方式 http 地址 ...

  3. nyoj 表达式求值

    35-表达式求值 内存限制:64MB 时间限制:3000ms Special Judge: Noaccepted:19 submit:26 题目描述: ACM队的mdd想做一个计算器,但是,他要做的不 ...

  4. Upgrade to or Install Cinnamon 2.4 in Ubuntu

    http://www.omgubuntu.co.uk/2014/11/install-cinnamon-2-4-ubuntu-14-04-lts sudo add-apt-repository ppa ...

  5. 【转】每天一个linux命令（59）：rcp命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/14/2958685.html rcp代表“remote file copy”(远程文件拷贝).该命 ...

  6. POJ1050最大子矩阵面积

    题目:http://poj.org/problem?id=1050 自己用了n^4的像暴搜一样的方法,感到有点奇怪——真的是这样? #include<iostream> #include& ...

  7. angularjs 本地数据存储LocalStorage

    1.定义服务 //=========本地存储数据服务============ app.factory('locals', ['$window', function ($window) { return ...

  8. keepalived的配置详解（非常详细）

    keepalived的配置详解(非常详细) 2017-01-22 15:24 2997人阅读 评论(0) 收藏 举报  分类: 运维学习(25)    转载自:http://blog.csdn.net ...

  9. 关于有时候导入maven项目时候报错(有红色叹号,类中导入的包提示"the import java.util cannot be resolve,")

    ------解决方案--------------------解决方案:右键项目-------buildpath--------最下面那个configura...的选择libraries找到JRE(这个 ...

  10. JSSDK微信自定义分享朋友圈

    服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议       ...