【问题标题】:how to pass particular id to Bootstrap Modal with toggle如何通过切换将特定 id 传递给 Bootstrap Modal
【发布时间】:2018-09-27 07:00:05
【问题描述】:
如何通过切换将特定 id 传递给 Bootstrap Modal
<%= link_to ' Reject', '#myModal', 'data-toggle' => 'modal',class: "btn btn-danger btn btn-primary btn-sm",:id =>applyleave.id %> </td
<div class="modal-body">
<%= text_field_tag :adminreason,:id =>applyleave.id %>
</div>
【问题讨论】:
标签:
ruby-on-rails
ruby-on-rails-4
ruby-on-rails-5
【解决方案1】:
我们需要在您的按钮中添加属性数据ID,如下所示,
<button type="button" data-toggle="modal" data-target="##myModal" data-id="jawa">Delete</button>
这个 JS 函数将在打开 boostrap 模态窗口之前被调用。在该函数中,我们可以获取 data-id 属性值,然后我们可以编写基于获取值的代码。看下面的代码,
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function(event) {
var userName = $(event.relatedTarget).data('id');
$("#modalText").html("You are going to be deleted" + userName);
});
</script>
这是模态窗口代码,
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="cancelModal">Google Map</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="modalText"></div>
</div>
<div class="modal-footer">
<a href="" target="_blank" id="mapLink">Open in new tab</a>
</div>
</div>
</div>
</div>
希望对你有所帮助。