Как вы можете реализовать кнопку оформления заказа на рельсах, которая ведет к модальному модулю для ввода информации о кредитной карте?

Я использую rails, materializeCss modal и Braintree 'dropin' для обработки своих форм. Я встроил "дроп" "мозгового дерева" в div в форме, которая имеет модальный класс. Когда вы нажимаете кнопку оформления заказа, он открывает div с кнопкой «dropin» и формой отправки. Однако модальный 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 находится внутри формы, может иметь какое-то отношение к этому, но кнопка отправки формы находится внутри модального окна, поэтому я не могу поместить модальное окно вне формы. Как это можно исправить? Есть ли лучший способ реализации модальной проверки?