Question

我正在使用twitter bootstrap模式和jquery。

如果有多个按钮可以创建模式对话框，如何查找源按钮？

在bootstrap-modal之前，我使用onclick来显示确认消息，比如，onclick =“newGame（3，true）”;现在我想用bootstrap-modal来做。

HTML，

<button type="button" class="btn" id="ctrl6" data-controls-modal="my-modal" data- 
backdrop="static">3</button>
<button type="button" class="btn" id="ctrl7" data-controls-modal="my-modal" data-
backdrop="static">4</button>
<button type="button" class="btn" id="ctrl8" data-controls-modal="my-modal" data- 
backdrop="static">5</button>

<div id="my-modal" class="modal hide fade in" style="display: none;">
...
</div>

JS，

  $(document).ready(function() {
      // Hide modal if "Go back" is pressed
      $('#my-modal .go-back-button').click(function() {
        $('#my-modal').modal('hide');
      });

      // Hide modal if "Okay" is pressed
      $('#my-modal .okay-button').click(function() {
        $('#my-modal').modal('hide');
      });
  });

感谢。

Answer 1

您可能会发现最近的拉取请求很有用：Allow passing data arguments to modal

此提交修改Modal插件，以便它抓取触发元素上的所有数据属性。通过在所有触发元素中添加唯一标识符，假设data-user="some_uid"，可以在将来从模态对象中检索数据。

例如，如果使用示例中的按钮：

<button data-user="4" ... >
<button data-user="5" ... >
<button data-user="6" ... >

在回调中，您可以访问该信息：

// Hide modal if "Okay" is pressed
$('#my-modal').on('click', '.okay-button', function(e) {
  var modal = $(e.delegateTarget).data('modal');

  console.log('Originating element user: ' + modal.options.user);

  modal.hide();
});

JSFiddle

_{注意：我发现自问这个问题后，模态的API发生了重大变化，这也是我为什么忽略了按钮标记的其他细节的部分原因。但是，我认为要解决的问题仍然存在。}

Answer 2

click函数接受一个链接到触发事件的元素的参数：

$('#my-modal .okay-button').click(function(e) {
   // e is the element that triggered the event
   console.log(e.target); // outputs an Object that you can then explore with Firebug/developer tool.
   // for example e.target.firstChild.wholeText returns the text of the button
});

示例here（jsfiddle）。

如何找到bootstrap-modal对话框的源代码

2 个答案:

JSFiddle