How to find the source of bootstrap-modal dialogue

Question

I am using twitter bootstrap modal and jquery.

How to find the source button when there are several buttons from which a modal dialog can be created?

Before loading modal, I used onclick to display a confirmation message, for example, onclick = "newGame (3, true)"; now i want to do this with 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'); }); }); 

thanks.

Answer 1

You can find a recent request to extract useful data: Allow passing arguments of data to modal

This commit modifies the Modal plugin so that it captures all the data attributes in the launcher. By adding unique identifiers in all launch elements, say data-user="some_uid" , data can be obtained from a modal object in the future.

For example, if the buttons in the example are used:

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

In callbacks, you can access this information:

 // 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

_{Note I understand that the API for the mod has changed significantly since this question was asked, and partly why I masked the other details of the button layout. However, I think the problem that will be solved is still relevant.}

Answer 2

The click function accepts a parameter that refers to the element that triggers the event:

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

Example here (jsfiddle).