Google Map Javascript API - 如何为模态叠加添加Bootstrap按钮？

我正在使用Google maps Javascript API。我想覆盖地图顶部的引导按钮，这将启动一个有用的提示模式覆盖。Google Map Javascript API - 如何为模态叠加添加Bootstrap按钮？

下面的代码工作，但模式按钮不在地图上。帮助赞赏。

下面是一个例子JSBin：JSBIN

<!DOCTYPE html> 
<html> 
<head> 

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css'/> 
<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css' /> 

<script src='http://code.jquery.com/jquery.min.js'></script> 
<script src='http://code.jquery.com/ui/jquery-ui-git.js'></script> 
<script type='text/javascript' src='http://www.google.com/jsapi'></script>  <!--Load the Google chart AJAX API--> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  <!-- Google map API --> 
<script src='http://twitter.github.com/bootstrap/assets/js/bootstrap.js'></script> 


<title>Google Maps</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map_canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 
</style> 

<script> 
    var map; 
    function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     mapOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 

<!-- MODAL OVERLAY START --> 
<a data-toggle='modal' href='#myModal' class='btn btn-info pull-left'><i class='icon-white icon-info-sign'></i>&nbspHint</a> 
      <div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
     <div class='modal-header'> 
      <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button> 
      <h3 id='myModalLabel'>Welcome</h3> 
     </div> 

     <div class='modal-body'> 
     <h4>Quick Hints</h4> 
      <p><small>Blah blah.</small></p> 

     </div> 
     <div class='modal-footer'> 
      <button class='btn' data-dismiss='modal'>Close</button> 
     </div> 
     </div> 
<!-- MODAL OVERLAY END --> 


<div id="map_canvas"></div>

来源

2013-01-12 Jeremy

这不是在地图上，因为地图是刚刚页面上的其他元素，并且在默认情况下所有的元素都相对定位。您可以通过扩展btn的引导CSS，增加z-index和绝对定位元素来解决此问题。

通过向您的按钮添加额外的类来扩展CSS。让我们称之为“my_mo”。

.my_mo { 
position:absolute; 
z-index:2; 
}

为了这个工作，新的CSS必须在bootstrap CSS之后（所以定位设置被覆盖）。

来源

2013-01-12 13:29:37 Kira

Google Map Javascript API - 如何为模态叠加添加Bootstrap按钮？

回答

相关问题