クレジットカード情報を入力するためのモーダルにつながるレールチェックアウトボタンを実装するにはどうすればよいですか？

Question

私はフォームを処理するために、レール、materializeCssモーダルとブレーンツリー 'dropin'を使用しています。私は、モーダルクラスを持つフォームのdivにbraintree "dropin"を埋め込みました。チェックアウトボタンをクリックすると、 'dropin'とフォーム送信ボタンでdivが開きます。しかし、チェックアウトボタンがクリックされると、モーダルdivは暗いオーバーレイの後ろに隠されます。

<%= form_for([@listing, @listing.order.new]) do |f| %> 
    //lots of code 

    <!-- modal trigger start --> 

    <button class="modal-trigger btn btn-large waves-effect cyan waves-light" id="book" data-target="modal1">Proceed to Checkout</button> 

    <!-- modal trigger end --> 

    <!-- modal start --> 

    <div class="modal " id="modal1" > 
     <div class="modal-content"> 
      <h4 id="credit-text center-align">Enter your Credit card details </h4> 
      <div id="dropin"></div> 

      <button class="btn btn-large center-align" type="submit" name="action">Request Booking</button> 

     </div>       
    </div> 
    <!-- modal end --> 
<% end %> 

//added an alert just to make sure the modal is firing. 
<script> 
    $(function(){ 
     $('.modal-trigger').leanModal({ ready: function() { alert('Ready'); }}); 
    }); 
</script> 

私はモーダルdiv要素がフォーム内であるという事実は、それとは何かを持っているかもしれませんが、フォームは、私は、フォームの外モーダルを入れて傾けるように、ボタンがモーダルの内側にある提出すると思います。どのようにこれを修正できますか？モーダルチェックアウトを実装するより良い方法はありますか？

Answer 1

あなたのモーダルをスタイリングしている間に、あなたはz-index CSSルールを上書きしているかもしれません。

.modalがオーバーレイしている暗い背景よりも高いz-indexであることを確認してください。