在引导模式中传递和检查参数答案

【问题标题】：pass and check parameters in bootstrap modal在引导模式中传递和检查参数
【发布时间】：2015-11-06 09:01:25
【问题描述】：

我有一个引导模式，它由同一页面中的两个链接触发，我想传递一些参数来通知对话框它是从哪个元素触发的。所以我可以在我的对话框 gsp tempalte 中检查这个参数。

第一个链接

 <a href="#" id="editCourseModal" data-toggle="modal" data-target="#createCourseModal" data-backdrop="static" data-keyboard="false">

第二个单键：

<button type="button" class="form-group btn btn-md btn-default" 
   data-toggle="modal" data-target="#createCourseModal" data-backdrop="static" data-keyboard="false">

模态对话框：

<div id="createCourseModal"  tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body edit-content">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

我想在我的对话框中检查这个参数（ g:if test="this parameter" ），这样我就可以基于这个实现、隐藏和显示一些 html 元素。可以这样做吗？有没有人有其他想法来解决这个问题？

【问题讨论】：

标签： jquery twitter-bootstrap gsp

【解决方案1】：

您可以使用要发送的参数为每个触发按钮添加数据属性，并执行类似的操作

$('#createCourseModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal

  var parameter = button.data('yourDataAttributeName') // Extract info from data-* attributes

  var modal = $(this)
  if (parameter == X) {
      modal.find('.modal-title').text('Clicked by X');
  } else {
      modal.find('.modal-title').text('Clicked by Y');
  }
})

【讨论】：

【解决方案2】：

在加载带有数据属性的模态框内，您可以使用 jQuery 在某个元素单击时打开模态框。

例如，假设您有两个锚链接：

<a href="#" id="link1"></a>
<a href="#" id="link2"></a>

您可以像这样使用打开模式：

$('#link1').click(function() {
    $('#myModal').modal('show');
    // Here you could hide/show certain elements, and change this for #link2
});

或者，你可以只有两个模态。

【讨论】：

【解决方案3】：

您可以将 data-id 相应地添加到您的按钮并使用 j-query 链接捕获该属性。

$(document).on("click", ".openModal", function () {
     var clickedBy = $(this).data('id');
     $(".modal-body").html(clickedBy)
});

找到上述问题的以下链接

http://plnkr.co/edit/5EzNaDm1Z5SsXWngGULI?p=preview

【讨论】：