Как добавить диалог для начальной загрузки 4 модальные кнопки рельсы 5? - PullRequest
Новая
       7

Как добавить диалог для начальной загрузки 4 модальные кнопки рельсы 5?

0 голосов
/ 21 сентября 2018

Я успешно добавил загрузочный модал в мое приложение rails 5, но я пытаюсь добавить диалоговое окно, похожее на другие формы rails, чтобы попросить их подтвердить, хотят ли они продолжить.С этим модалом мне нужно получить вопрос с отменой или продолжением, который затем запустит модал.Например, они нажимают «выкупить», а затем перед показом модального вопроса появится вопрос.«Вы хотите, чтобы ваше предложение было выкуплено. Я использовал приведенный ниже код с рельсами, но не знаю, как применить его к модалу начальной загрузки. 

<%= link_to theme_icon_tag("trash"), deal_path(deal), 'data-toggle': 
'tooltip', title: 'Delete',data: { confirm: 'Are you sure?' }, method: 
:delete, class: 'btn btn-link' %>

мое исследование показало только то, какиспользовать модальное как само диалоговое оповещение. Нужно ли использовать модальное внутри модального или есть JS или загрузочный код для достижения этого

моего модального кода ниже: 

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary btn-block" data- 
toggle="modal" data-target="#redeem">Redeem Now</button>

<div id="redeem" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data- 
   dismiss="modal">&times;</button>
        <h4 class="modal-title"><%= @deal.deal_title %></h4>
      </div>
      <div class="modal-body">
        <p>Your coupon code is <%= @deal.promo_code %>. You just saved 
         a bunch of mullah $$$$</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data- 
      dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

1 Ответ

0 голосов
/ 21 сентября 2018

Например, они нажимают «выкупить», а затем перед показом модального режима появится вопрос."Вы хотите, чтобы ваше предложение было погашено.

Решение № 1:

У вас может быть ссылка, которая попросит пользователей выкупить илине так 

<%= link_to "Redeem", "#", class: 'btn btn-link redeem-link', data: { confirm: 'Do you wish to proceed your offer will be redeemed' } %>

, затем с помощью Jquery запустите модальный режим так: 

$(document).ready(function() {
  $('.redeem-link').click(function() {
    if (confirm('Do you wish to proceed your offer will be redeemed')) // If user clicks ok
    {
      $("#redeem").modal('show'); // This will open the modal
    }
    else{
    }
  });
});

Решение №2:

Лучший способДля обработки таких сценариев используется плагин jquery-Подтвердите . Он поставляется со многими опциями, которые очень удобны.

Импортируйте его через CDN 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

Имейте ссылку, которая вызовет окно подтверждения 

<%= link_to "Redeem", "#", class: 'btn btn-link redeem-link' %>

Добавьте приведенный ниже код jquery, и вы готовы идти 

$(".redeem-link").confirm({
  title: 'Do you wish to proceed your offer will be redeemed',
  buttons: {
    confirm: function () {
      $("#redeem").modal('show'); // This will open the modal
    },
    cancel: function () {
      $.alert('Canceled!');
    }
  }
});
...