如何在 bootstrap 4 modal button rails 5 中添加一个对话框？

Question

我已经成功地向我的 rails 5 应用程序添加了一个引导模式，但是我正在尝试添加一个类似于其他 rails 表单的对话框，要求他们确认他们是否希望继续。使用此模态，我需要得到一个带有取消或继续的问题，然后将触发模态。例如，他们按下兑换，然后在显示模态之前会出现一个问题。 “您是否希望兑现您的报价。我过去曾将以下代码与 rails 一起使用，但不知道如何将其应用于 bootstrap modal。

<%= 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 或者 bootstrap 代码来实现这个

我的模态代码如下：

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

Answer 1

例如，他们在显示模态之前按兑换 会出现问题。 “你想继续你的提议吗？ 赎回。

解决方案 #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-confirm 插件。这附带了许多非常方便的选项。

通过 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!');
    }
  }
});