It is easier to see what I mean by looking at this image: http://postimg.org/image/fcmo6pbvp/
I am trying to let the user input the address using the google maps places auto-complete JS function like this example .
It works, but the autocomplete text field, is blocked by the jQuery Mobile popup, just like the picture shown.
The HTML Look something like this:
<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>
I will be so happy if someone can tell me what went wrong.
BTW, don't laugh at my code, this is my first JS app :p
It's too late for Christina. I hope to help other people struggling this issue.
My solution is just in you css file add code.
.pac-container{
z-index: 9999 !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.