Google지도 API에서 부트 스트랩 로그인 모달 표시

Google Maps API를 배경으로로드 할 웹 페이지를 만든 다음 사용자가 로그인했는지 확인합니다. 로그인 한 경우 페이지에 데이터가로드됩니다 데이터베이스에서 업데이트하고지도를 업데이트합니다 (프로그래밍하지 않았기 때문에 자리 표시 자 알림 만). 사용자가 로그인하지 않은 경우 부트 스트랩 모달이 로그인 양식과 함께 표시됩니다. 그러나 모달을 화면에 표시하는 데 문제가 있습니다.Google지도 API에서 부트 스트랩 로그인 모달 표시

<!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; 
}

어떤 도움을 주시면 감사하겠습니다.

출처

2015-02-02 pbcrazy

# map-canvas를 -1로 설정하면 표시되는 레이어 아래에 표시됩니다. z-index로 설정하십시오 : 0 – w3bMak3r

콘솔 내부의 모습은 도움이 될 수 있습니다

는

오류 : 부트 스트랩의 자바 스크립트는 JQuery와-2.1.3.min.js 전에 bootstrap.min.js를로드해야합니다 jQuery를

필요

출처

2015-02-02 02:31:02

그것은 나를 잡아 먹는 바보 같은 짓이야. - 고맙습니다. – pbcrazy

오, 너 거기 가서 ... 잘 했어. – w3bMak3r

코드를 약간 편집했습니다. # map-canvas에서 z- 색인을 변경했습니다. 나는 또한 당신의 자바 스크립트를 rearanged.

모달이 이제지도 위에 표시됩니다.

올바른 것이 무엇입니까? 코멘트가 아닌 경우 알려주십시오.

자바 스크립트 :

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/

출처

2015-02-02 02:03:37 w3bMak3r

고마워요, 제가 원했던 것입니다. 나는 그것이 작동해야한다고 피들에게 말할 수는 있지만, 모든 것을 복사해도 내 컴퓨터에 로컬로로드되거나 내 웹 사이트에 업로드 될 때 작동하지 않는 것처럼 보일 수 있습니다. 추측을 계속 지켜봐야 할 것입니다. – pbcrazy

어쩌면 나는 너를 도울 수있다. 너는 위치의 URL이 있는가? – w3bMak3r

Google지도 API에서 부트 스트랩 로그인 모달 표시

답변

관련 문제