グーグル・プレイスオートコンプリートは、ブートストラップモーダルで

修正アップデートが表示されない：私が箱を初期化された方法は、問題を引き起こしたことをここにいるようだと、それを固定グーグル・プレイスオートコンプリートは、ブートストラップモーダルで

<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ものです：私はあることを、コードを更新しました非常に単純な理由は、このhttp://jsfiddle.net/g8vxmLn9/1/の作品は古いブートストラップとjqueryを使用しているので、私は新しいものを使用しているので、私は問題を抱えているためです。

私は単に、ブートストラップ（3.3）モデルにオートコンプリートボックスを表示し、入力時に結果を表示したいだけです。

<!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" rel="stylesheet" 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>

出典

2016-03-20 Zoinky

'ID =「map_canvas」'はJS – Shehary

@Sheharyに定義されていないその – Zoinky

あなたはまだ探しているならこれは

<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>

出典

2016-03-20 16:16:10 Zoinky

これは私のために –

_Explanation_： '.pac-container'は、Googleオートコンプリートの結果の折り返しdiv要素です。この場合、モーダルは既に高い 'z-index'を持っています。だから、あなたはモーダルより高い 'z-index'を設定しなければなりません – Eranda

それを修正しました。

    var pacContainerInitialized = false; 
        $('#inputField').keypress(function() { 
          if (!pacContainerInitialized) { 
            $('.pac-container').css('z-index', '9999'); 
            pacContainerInitialized = true; 
          } 
        });

出典

2017-02-10 14:42:04 ashwin1103

ありがとう、私のために働いた！ –

グーグル・プレイスオートコンプリートは、ブートストラップモーダルで

答えて

関連する問題