在 bootstrap 模态中传递和检查参数

Question

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

第一link

 <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 元素。有可能这样做吗？有没有其他想法来解决这个问题？

Answer 1

在使用数据属性加载模态的内部，您可以使用 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
});

或者，您可以只使用两个模态框。

Answer 2

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

的操作

$('#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');
  }
})

Answer 3

您可以相应地将 data-id 添加到您的按钮，然后 link 使用 j-query 捕获属性。

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

找到上面问题的下面link

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

在 bootstrap 模态中传递和检查参数

pass and check parameters in bootstrap modal

jquery

twitter-bootstrap

gsp