1
我是新來處理引導。我正在嘗試將Google JS Place自動填充API與引導3.0 Modal集成。谷歌地方自動完成API下拉列表不顯示在莫代爾
莫代爾CSS:
#searchModal{
z-index:1041 !important;
}
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
/*font-size: 30px;*/
}
.modal-footer {
background-color: #f9f9f9;
}
.modal-backdrop {
opacity: 0.5 !important;
}
自動完成JS:
function initMap() {
var oInput = document.getElementById('ocity-input');
var oSearchBox = new google.maps.places.SearchBox(oInput);
oSearchBox.addListener('places_changed', function() {
var places = oSearchBox.getPlaces();
places.forEach(function(place) {
console.log(place.name);
console.log(place.place_id);
});
});
}`
自動完成CSS:
@CHARSET "ISO-8859-1";
html, body {
height: 100%;margin: 0;padding: 0;
}
.form-control {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#ocity-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#ocity-input:focus {
border-color: #4d90fe;
}
.ocity-container {
font-family: Roboto;
z-index: 10000;
display: block !important;
}
模態代碼:
<div class="container">
<div class="modal fade" id="searchModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px;">
<h4 style="text-align: center;">
<span class="logo">Name</span>
</h4>
</div>
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
<div class="form-group">
<input id="ocity-input" class="form-control" type="text" placeholder="Origin">
</div>
<button type="submit" class="btn btn-success btn-block">
<span class="fa fa-undo"></span> Lets Go
</button>
</form>
</div>
</div>
</div>
</div>
</div>
我已經嘗試了多個z-index幫助在stackoverflow和互聯網上的答案,但他們似乎並沒有爲我工作。
它確實修復。我沒有意識到.pac容器是必不可少的。我將pac-container修改爲我的輸入字段ID – yashgarg1232