Показать Bootstrap login modal через API Карт Google

Я пытаюсь создать веб-страницу, которая будет загружать API Карт Google в качестве фона, а затем проверить, вошел ли пользователь в систему. Если они вошли в систему, страница загрузит данные из базы данных и обновить карту (не запрограммировали так много, просто оповещение заполнителя). Если пользователь не вошел в систему, то модальность Bootstrap должна появиться с формой входа. Однако у меня возникают проблемы с появлением модальности на экране.Показать Bootstrap login modal через API Карт Google

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

Взгляд внутрь консоли может быть полезно:

Ошибка JavaScript Bootstrap требует JQuery

вы должны загрузить JQuery-2.1.3.min.js до bootstrap.min.js

источник

2015-02-02 02:31:02

Это глупые вещи, которые меня достают. -.- Большое спасибо! – pbcrazy

о, вы идете ... хорошая работа – w3bMak3r

Я немного изменил код. Я изменил z-индекс на вашем # карте-холсте. Я также переделал ваш 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; 
}

Рабочая Fiddle: http://jsfiddle.net/cwytqLfm/

источник

2015-02-02 02:03:37 w3bMak3r

Спасибо, это именно то, что я хотел. Я могу сказать от Fiddle, что он должен работать, но я не могу заставить его работать, когда он загружается локально на моем собственном компьютере или при загрузке на мой сайт, даже когда я копирую все. Угадайте, мне нужно будет продолжать с ним общаться. – pbcrazy

Возможно, я могу помочь вам с этим. У вас есть URL-адрес сайта? – w3bMak3r

Показать Bootstrap login modal через API Карт Google

ответ

Смежные вопросы