How to get Twitter Bootstrap Modal's invoker e

问题:

I have got a a element for invoking modal:

<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>

And, say this is my modal:

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

I can bind functions to events fired by modal:

$('#myModal').on('hidden', function () {
  // do something…
})

My question is: How can i access the a element -which invoked the modal- from my event subscriber function?

回答1:

It was solved in Bootstrap 3.0.0 thanks to event.relatedTarget.

$('#your-modal').on('show.bs.modal', function (e) {
  var $invoker = $(e.relatedTarget);
});

回答2:

You have to listen to:

$('[data-toggle="modal"]').on('click', function() {
    $($(this).attr('href')).data('trigger', this);
});
$('.modal').on('show.bs.modal', function() {
    console.log('Modal is triggered by ' + $(this).data('trigger'));
});

You can of course replace show.bs.modal with shown.bs.modal or any other event they fire. Note that this is for Bootstrap 3.0.0. If you're using 2.3.2 you need to get rid of .bs.modal (I think).

What I like about this solution: you do not have to remember who is this, self, that and other proxy calls workarounds.

Of course, you have to test if the href attribute is not a real link (the dynamic modal loading option).

回答3:

The modal element has a data object named modal that saves all the options that are passed. You can set a 'source' data attribute on the element that triggers the modal, set it to the ID of the source, and then retrieve it later from the options variable.

The trigger would be:

<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a>

In the event callback, get the modal data object, and look at the source option:

$('#myModal').on('hidden', function () {
  var modal = $(this).data('modal');
  var $trigger = $(modal.options.source);
  // $trigger is the #launch-modal-1 jQuery object
});

回答4:

Currently it's not available out-of-box. There is a feature request for it and a work-around if you want to edit the bootstrap-modal code yourself.

See here

回答5:

I had a situation where I had to bind some data related to the "invoker", just like you said. I've managed to solve it by binding a "click" event to it and working with the data like this:

The invoker

<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">

The JS to catch data related to the invoker (Just some code example)

$('#element').on('click', function () { // Had to use "on" because it was ajax generated content (just an example)
    var self = $(this);
});

Like this, you can handle the data related to your invoker anyway you want.