Google 地图地点自动完成被 jQuery 移动弹出窗口阻止
Google Map Places Auto-complete blocked by jQuery Mobile popup
通过查看这张图片更容易理解我的意思:
http://postimg.org/image/fcmo6pbvp/
我正在尝试让用户使用 google 地图放置自动完成 JS 函数来输入地址 example。
它可以工作,但是自动完成文本字段被 jQuery 移动弹出窗口阻止,就像显示的图片一样。
HTML 看起来像这样:
<li>
<a href="#popupLocation" data-rel="popup" data-position-to="window"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">
<h3>Location</h3>
<p id="locationSelectionString">London, UK</p>
</a>
<div data-role="popup" id="popupLocation" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3 style="margin-top: 0px; margin-bottom: 0px;">Location</h3>
<hr>
<table width="100%">
<tr>
<input id="locationSelectionInput" onFocus="geolocate()" type="text" name="location" value="" placeholder="Enter a location" data-theme="a" style="margin-top: 0px; margin-bottom: 0px;">
</tr>
<tr>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocationCanceled();">Cancel</button>
</td>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocation();">OK</button>
</td>
</tr>
</table>
</div>
</div>
</li>
如果有人能告诉我哪里出了问题,我会很高兴。
顺便说一句,不要嘲笑我的代码,这是我的第一个 JS 应用程序 :p
对克里斯蒂娜来说已经太晚了。我希望能帮助其他在这个问题上苦苦挣扎的人。
我的解决办法就是在你的css文件中添加代码。
.pac-container{
z-index: 9999 !important;
}
通过查看这张图片更容易理解我的意思: http://postimg.org/image/fcmo6pbvp/
我正在尝试让用户使用 google 地图放置自动完成 JS 函数来输入地址 example。
它可以工作,但是自动完成文本字段被 jQuery 移动弹出窗口阻止,就像显示的图片一样。
HTML 看起来像这样:
<li>
<a href="#popupLocation" data-rel="popup" data-position-to="window"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">
<h3>Location</h3>
<p id="locationSelectionString">London, UK</p>
</a>
<div data-role="popup" id="popupLocation" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3 style="margin-top: 0px; margin-bottom: 0px;">Location</h3>
<hr>
<table width="100%">
<tr>
<input id="locationSelectionInput" onFocus="geolocate()" type="text" name="location" value="" placeholder="Enter a location" data-theme="a" style="margin-top: 0px; margin-bottom: 0px;">
</tr>
<tr>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocationCanceled();">Cancel</button>
</td>
<td width="50%">
<button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocation();">OK</button>
</td>
</tr>
</table>
</div>
</div>
</li>
如果有人能告诉我哪里出了问题,我会很高兴。
顺便说一句,不要嘲笑我的代码,这是我的第一个 JS 应用程序 :p
对克里斯蒂娜来说已经太晚了。我希望能帮助其他在这个问题上苦苦挣扎的人。
我的解决办法就是在你的css文件中添加代码。
.pac-container{
z-index: 9999 !important;
}