【Javascript Demo】遮罩层和百度地图弹出层简单实现
其实想做的就是显示百度地图的弹出层，现在已经简单实现了。示例和代码如下，点击按钮可以看到效果：
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: 700; position: relative; height: 30px; width: 100%; } .div_show_font { color: #FFFFFF; float: left; font-weight: 700; 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; }
