更改JQuery對話框或谷歌地圖Z索引

Question

我想要做的事情，我認爲應該相當簡單，但我有不穩定的結果。我想打開一個對話框，並在其中有兩個地址字段，它們使用Google地圖自動完成功能根據用戶輸入的內容來建議位置。我能夠讓字段顯示「輸入位置」告訴我谷歌地圖API調用正在工作，但它不是自動完成地址。

編輯：好的我確定了這個問題。位置下拉列表將以對話框結束，因此不可見。那麼有人可以告訴我如何更改查詢-UI對話框和覆蓋圖或谷歌地圖下拉框的z-index嗎？

下面是我創建的示例的鏈接，因爲您需要註冊網站以供使用的實際表單。 http://google.backcountryride.com/dialog_google_test.php

這裏是我的代碼： jQuery的：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=false"></script> 
<script type="text/javascript"> 
$(function() { 

var post = $("#post<?php echo $instance ?>"), 
    role = $("#role<?php echo $instance ?>"), 
    allFields = $([]).add(post).add(role), 
    tips = $(".validateTips"); 

function updateTips(t) { 
    tips 
     .text(t) 
     .addClass("ui-state-highlight"); 
    setTimeout(function() { 
     tips.removeClass("ui-state-highlight", 1500); 
    }, 500); 
} 

function checkLength(o, n) { 
    if (o.val().length < 1) { 
     o.addClass("ui-state-error"); 
     updateTips(n + " cannot be blank."); 
     return false; 
    } else { 
     return true; 
    } 
} 

function checkRegexp(o, regexp, n) { 
    if (!(regexp.test(o.val()))) { 
     o.addClass("ui-state-error"); 
     updateTips(n); 
     return false; 
    } else { 
     return true; 
    } 
} 

$("#carpool-request<?php echo $instance ?>").dialog({ 
    autoOpen: false, 
    height: 400, 
    width: 400, 
    modal: true, 
    buttons: { 
     "Send Message": function() { 
      var bValid = true; 
      allFields.removeClass("ui-state-error"); 

      bValid = bValid && checkLength(post, "Your message"); 
      bValid = bValid && checkLength(role, "Your role"); 

      if (bValid) { 
       //window.alert('All clear!'); 
       document.forms["send_message<?php echo $instance ?>"].submit(); 
       $(this).dialog("close"); 
      } 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

$("#carpool-send<?php echo $instance ?>").click(function() { 
    $("#carpool-request<?php echo $instance ?>").dialog("open"); 
    $(".address-field").each (function (ix, item) { 
     var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(41.0000, -110.0000), 
      new google.maps.LatLng(44.000, -112.0000)); 
     var options = { 
      bounds: defaultBounds, 
      types: ['geocode'] 
      //types: ['establishment'] 
     }; 
     var autocomplete = new google.maps.places.Autocomplete ($(item).get(0), options); 
    }); 
}); 
}); 
</script> 

的PHP來渲染表單：

<?php 

//allow sending a message if not you 
echo '<div id="carpool-request'.$instance.'" title="Request to join carpool">'; 
echo '<div id="dialog-form'.$instance.'">'; 
echo '<div id="dialog-form">'; 
echo '<p class="validateTips">All form fields are required.</p>'; 
echo '<form action="'.$_SERVER['PHP_SELF'].'" method="post" id="send_message'.$instance.'">'; 
echo '<fieldset>'; 
echo '<input type="hidden" id="subject'.$instance.'" name="subject" value="Join carpool request" class="text ui-widget-content ui-corner-all" />'; 
echo '<label>Please Provide Where You Will Be Traveling To and From</label> 
     <label>Start Address:</label> 
     <input type="text" class="address-field" id="address-start" name="addressStart" value=""> 
     <label>End Address:</label> 
     <input type="text" class="address-field" id="address-end" name="addressEnd" value="">'; 
echo '<label>I am a </label>'; 
echo '<select name="role" size="1" id="role'.$instance.'" >'; 
echo '<option value="">Please Select</option>'; 
echo '<option value="D">Driver</option>'; 
echo '<option value="P">Passenger</option>'; 
echo '<option value="E">Either</option>'; 
echo '</select>'; 
echo '<label>Days you wish to join carpool</label>'; 
echo '<div id="days-week">'; 
echo Utility::carpoolDays($row_commuters['commuteId']); 
echo '</div>'; 
echo '<label>Will you pitch in for gas?</label>'; 
echo '<select name="gas" size="1" id="expenses" >'; 
echo '<option value="">Please Select</option>'; 
echo '<option value="Y">Yes</option>'; 
echo '<option value="N">No</option>'; 
echo '</select>'; 
echo '<label for="post" style="width:100%">Add a personal message</label>'; 
echo '<textarea name="post" id="post'.$instance.'" class="text ui-widget-content ui-corner-all" >'; 
if(isset($_POST['post'])) echo $_POST['post']; 
echo '</textarea>'; 
echo '<input type="hidden" name="driverId" value="' .$row_commuters['user_id'] . '" />'; 
echo '<input type="hidden" name="commuteId" value="' .$row_commuters['commuteId'] . '" />'; 
echo '<input type="hidden" name="tab" value="commute" />'; 
echo '<input type="hidden" name="process_carpool_request" value="process" />'; 
echo '</fieldset>'; 
echo '</form>'; 
echo '</div>'; 
echo '</div>'; 
echo '</div>'; 
echo '<a href="javascript:void()" id="carpool-send'.$instance.'">Ask to join this carpool</button>'; 
echo '<br/>'; 
?> 

預先感謝您的幫助！

Answer 1

所以我想通了什麼類的div是包含在下拉列表中，我已將此添加到我的CSS文件：

.pac-container { 
    z-index: 1200 !important; 
} 

PAC-容器是由谷歌地圖應用到其下拉DIV類自動運行列表。通過使用！important修飾符，我可以否決元素樣式，並將z-index設置爲高於查詢ui爲其對話框設置的z-index。