發送回

Question

谷歌地圖的div我有這種情況

試圖登錄時，彈出出來。我想這是繼谷歌地圖的div

所以，這是我的彈出

.popup-inner { 
    max-width:500px; 
    width:90%; 
    padding:40px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform:translate(-50%, -50%); 
    transform:translate(-50%, -50%); 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
    border-radius:3px; 
    background:#fff; 
    z-index:9999999; 

的風格，同時背部變得

.popup { 
    width:100%; 
    height:100%; 
    display:none; 
    position:fixed; 
    top:0px; 
    left:0px; 
    background:rgba(0,0,0,0.75); 
} 

，這是彈出

<div class="popup" data-popup="popup-1"> 
      <div class="popup-inner"> 

       <form action="#" th:action="@{/}" method="post" class="form-signin"> 

        <div class="form-group"> 
//content of the form... 
         </div> 

       </form> 
       <p> 
        <a data-popup-close="popup-1" href="#">Close</a> 
       </p> 
       <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 

      </div> 

     </div> 

這張地圖有一個簡單的，而流行的

<div id="map"></div> 

這種風格

#map { 
    width:100%; 
    height: 600px; 
    z-index: 1; 
} 

Answer 1

只需添加z-index:2;到.popup

.popup { 
    z-index:2; 
} 

Answer 2

有沒有在你的代碼的一些變化，看看我的片段也有一些，你應該閱讀評論。

希望這會爲你做的工作！

.popup { 
 
    /*display:none; //change it back to its original*/ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 

 
    top:0px; /* 0px is 0 by default cause there does not exist 0 pixels. So only 0 is ok */ 
 
    left:0; 
 
    background:rgba(0,0,0,0.75); 
 
} 
 
    
 
.popup-inner { 
 
    position:fixed; /* changed position: absolute to fixed */ 
 
    width:90%; 
 
    max-width:500px; 
 
    
 
    top:50%; 
 
    left:50%; 
 
    
 
    padding:40px; 
 
    
 
    -webkit-transform:translate(-50%, -50%); 
 
    transform:translate(-50%, -50%); 
 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
 
    border-radius:3px; 
 
    background:red; 
 
    z-index: 10; 
 
} 
 

 
    
 
    
 
#map { 
 
    width:100%; 
 
    height: 600px; 
 
    z-index: 1; 
 
    background-color: pink; /* used to check the positions, make sure to remove the line */ 
 
}

<div class="popup" data-popup="popup-1"> 
 
    <div class="popup-inner"> 
 

 
    <form action="#" th:action="@{/}" method="post" class="form-signin"> 
 

 
    <div class="form-group"> 
 
     //content of the form... 
 
    </div> 
 

 
    </form> 
 
    <p> 
 
     <a data-popup-close="popup-1" href="#">Close</a> 
 
    </p> 
 
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
 

 
    </div> 
 

 
</div> 
 

 
<div id="map"></div>