0

Google マップ 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>

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 に答える