jquery - 更改 JQuery 对话框或 Google map Z 索引

Question

我正在尝试做一些我认为应该相当简单的事情，但结果不稳定。我想打开一个对话框，其中有 2 个地址字段，它们使用谷歌地图自动完成功能根据用户输入的内容建议位置。我能够让字段显示“输入位置”，这告诉我谷歌地图 API 调用正在工作，但它不是自动完成地址。

编辑:好的，我确定了问题所在。位置下拉列表最终位于对话框后面，因此不可见。那么有人可以告诉我如何更改查询用户界面对话框和叠加层或谷歌地图下拉框的 z 索引吗？

这里是我创建的示例的链接，因为您需要注册该网站才能使用实际的表单。 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-container 是 Google map 应用于其自动竞争下拉列表的 div 类。通过使用 !important 修饰符，我能够覆盖元素样式并将 z-index 设置为高于查询 ui 为其对话框设置的 z-index。