0

我正在使用谷歌地图 Javascript API。我想在地图顶部覆盖一个引导按钮，这将启动一个带有有用提示的模态覆盖。

下面的代码有效，但模式按钮不在地图顶部。帮助表示赞赏。

这是 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>

4

1 回答 1

0

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

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

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

为此，新的 CSS 必须在引导 CSS 之后（因此定位设置被覆盖）。

于 2013-01-12T13:29:37.313 回答