Google auf Platz Autocomplete zeigt nicht in der Bootstrap-modal

UPDATE:
Es scheint, dass die Art und Weise war ich das initialisieren der box wurde für die verursacht Probleme
hier ist, was es behoben

 <script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>

UPDATE: ich habe aktualisiert, der code sehr einfach zu sein, den Grund dieser http://jsfiddle.net/g8vxmLn9/1/ funktioniert ist, weil es sich mit älteren bootstrap und jquery, so dass ich vermute, weil ich bin mit den neueren bin ich mit der Probleme.

Ich einfach nur zeigen wollen, ein AutoVervollständigen-Feld in einem bootstrap(3.3) Modell und zeigen Sie die Ergebnisse während der Eingabe.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">   </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div>
    <div id="my-modal" class="modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <input name="keyword" id="keyword" type="text" />
            </div>

        </div>
    </div>
</div>
<script>
    $(function () {
        $("#my-modal").modal({
            show: false
        }).on("shown", function () {
            var input = document.getElementById("keyword");
            var autocomplete = new google.maps.places.Autocomplete(input);

        });
        $('#my-modal').modal('show');
    });
</script>
</body>
</html>
  • id="map_canvas" ist nicht definiert in JS
  • Ich aktualisierte den code, so dass einfacher und hat nichts zu tun mit der Leinwand, immer noch nicht funktioniert
InformationsquelleAutor Zoinky | 2016-03-20
  1. 43

    Dieser fixen es 

    <script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>
    • <style> .pac-container { z-index: 10000 !wichtig; } </style> Das funktioniert für mich
    • Erklärung: .pac-container ist die Verpackung div-element mit der Google-Autocomplete-Ergebnis. In diesem Fall modalen bereits eine hohe z-index. So haben Sie höhere z-index als die modal
    InformationsquelleAutor Zoinky
  2. 6

    Fügen Sie einfach 

    .pac-container {
    z-index: 10000 !important;
}
    InformationsquelleAutor Nishant Bhatt
  3. 5

    Wenn Sie noch auf der Suche.

                        var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index', '9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    });
    • Danke, für mich gearbeitet!
    InformationsquelleAutor ash1103
Schreibe einen Kommentar