通過Google Maps API顯示Bootstrap登錄模式

Question

我正在嘗試創建一個網頁，該網頁將Google Maps API作為背景加載，然后檢查用戶是否已登錄。如果他們已登錄，則該頁面將從數據庫加載數據並更新地圖（沒有編程了那么多，只是一個占位符警報）。 如果用戶未登錄，則應該使用登錄表單顯示Bootstrap模式。 但是，我很難讓模態顯示在屏幕上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Smart Force Tracker</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(35.40, -97.5),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.TERRAIN,
          panControl: false,
          zoomControl: false,
          streetViewControl: false
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }

    function setCookie(cname,cvalue,exhours) {
       var d = new Date();
       d.setTime(d.getTime() + (exhours*60*60*1000));
       var expires = "expires=" + d.toGMTString();
       document.cookie = cname+"="+cvalue+"; "+expires;
    }

    function getCookie(cname) {
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i=0; i<ca.length; i++) {
           var c = ca[i];
           while (c.charAt(0)==' ') c = c.substring(1);
           if (c.indexOf(name) == 0) {
               return c.substring(name.length, c.length);
           }
       }
       return "";
    }

    function checkLogin() {

       initialize();

       var isLogin=getCookie("isLogin");
       if (isLogin != "") {
           alert("Welcome again " + isLogin);
       } else {
          $("#loginModal").modal("show");
       }
    }
    </script>   
  </head>
  <body onload="checkLogin()">

    <div class="container">
       <div id="map-canvas">

       </div>
    </div>

    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
       <div class="modal-dialog modal-sm">
          <div class="model-content">
             <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Login</h4>
             </div>
             <div class="modal-body">
                <form class="form-signin">
                   <label for="inputEmail" class="sr-only">Email Address</label>
                   <input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
                   <label for="inputPassword" class="sr-only">Password</label>
                   <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                   <button class="btn btn-primary btn-block" type="submit">Sign In</button>
                </form>
             </div>
             <div class="modal-footer">
                <button class="btn btn-default btn-block" type="button">Register</button>
             </div>
          </div>
       </div>
    </div>

    <div class="modal-backdrop fade in"></div>

  </body>
</html>

main.css

#map-canvas 
{
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: 0;
z-index:-1;
}

任何幫助將不勝感激。

Answer 1

我稍微編輯了一下代碼。.我更改了＃map-canvas上的z-index。 我還重新整理了您的JavaScript。

模態現在顯示在地圖上。

這是您想要的正確內容嗎？ 如果不是，請在評論中讓我知道。

Javascript：

function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(35.40, -97.5),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      panControl: false,
      zoomControl: false,
      streetViewControl: false
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    checkLogin();
  }

function setCookie(cname,cvalue,exhours) {
   var d = new Date();
   d.setTime(d.getTime() + (exhours*60*60*1000));
   var expires = "expires=" + d.toGMTString();
   document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
   var name = cname + "=";
   var ca = document.cookie.split(';');
   for(var i=0; i<ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1);
       if (c.indexOf(name) == 0) {
           return c.substring(name.length, c.length);
       }
   }
   return "";
}

function checkLogin() {

   var isLogin=getCookie("isLogin");
   if (isLogin != "") {
       alert("Welcome again " + isLogin);
   } else {
      $("#loginModal").modal("show");
   }
}

$(document).ready(function(){
    initialize();    
});

CSS：

#map-canvas 
{
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: 0;
z-index:0;
}

工作小提琴： http : //jsfiddle.net/cwytqLfm/

Answer 2

控制台內部的外觀可能會有所幫助：

錯誤：Bootstrap的JavaScript需要jQuery

您必須在 bootstrap.min.js 之前加載jquery-2.1.3.min.js

通過Google Maps API顯示Bootstrap登錄模式

問題描述

2 個解決方案

解決方案1
1 2015-02-02 02:03:37

解決方案2
1 已采納 2015-02-02 02:31:02

通過Google Maps API顯示Bootstrap登錄模式

問題描述

2 個解決方案

解決方案1 1 2015-02-02 02:03:37

解決方案2 1 已采納 2015-02-02 02:31:02

解決方案1
1 2015-02-02 02:03:37

解決方案2
1 已采納 2015-02-02 02:31:02