如何向引导4模态按钮rails 5添加对话框？
如何向引导4模态按钮rails 5添加对话框？
提问于 2018-09-21 17:50:49
我已经成功地为我的rails 5应用程序添加了一个引导模式，但是我正在尝试添加一个类似于其他rails表单的对话框，以要求它们确认是否希望继续。有了这个模式，我需要得到一个问题与取消或连续，然后将触发模式。例如，他们按“救赎”键，然后在显示情态之前，会出现一个问题。“您是否愿意继续您的报价将被赎回。我曾经使用下面的代码与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">×</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
Stack Overflow用户
发布于 2018-09-21 19:34:59
例如，他们按“救赎”键，然后在显示情态之前，会出现一个问题。“你愿意吗?你的提议会被赎回吗？
解决方案#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：
处理这种情况的一个更好的方法是使用https://craftpip.github.io/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!');
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52448809
复制相关文章
相似问题
腾讯云开发者
