对话框由页面上模块打开
html代码：
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<dialog id="dialog">
<form method="dialog">
<input type="text" id="google">
</form>
</dialog>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places"
defer
></script>
</body>
</html>在js文件中，我创建了google自动完成，并将焦点放在对话框中的输入字段上。
JS代码：
let autocomplete;
const addressDialog = document.querySelector("#dialog");
const addressGoogleField = document.querySelector("#google");
addressDialog.showModal();
function fillInAddress() {
const place = autocomplete.getPlace();
console.log(place);
}
function initMap() {
autocomplete = new google.maps.places.Autocomplete(addressGoogleField, {
fields:["geometry"],
types:["geocode"]
});
addressGoogleField.focus();
autocomplete.addListener("place_changed", fillInAddress);
}
window.initMap = initMap;结果：Google Places Autocomplete Box is behind the modal dialog.
我想把自动完成框放在对话框前面。我该怎么做？
1条答案
按热度按时间tpxzln5u1#
这可能是z索引的问题。Google Place自动完成框（“pac-container”css类）被附加在body元素的末尾，而不是在您的模式对话框中。要确保自动完成框在您的模式对话框div的上方。您可以尝试用以下内容更新您的css：
10000 z轴正好是一个高到足以高于模态z轴的值。