Pass data arguments to modal? #531

andriijas opened this Issue Nov 3, 2011 · 48 comments
Bootstrap member
fat commented Nov 3, 2011


@fat fat closed this Nov 3, 2011

That doesnt work when I have multiple lins using data-controls-modal="countryModal"

I know I can bind click event on my own but would just be insanely nice not to. :-)

Bootstrap member
fat commented Nov 4, 2011

ahh interesting... well I think for now we aren't going to pass the data options around for you, as i don't think this is a very common thing. sorry about that :(


Common way is to use one modal for page.

Then, by clicking one of the links modal appears. So we should know which link shows modal to load information into it.

In my case I have got a row of items and a "show log" button for each. When I click "show log" modal appears but I need to understand what particular log to load.


@fl00r i agree it would be nice to know the origin of the show event, in the same way we know previous and next tab in tabbables. Im going to check the code and see if I can submit a pull request.


+1 for this. Consider a case where multiple elements trigger the same modal with a slight variation in state (like a single attribute difference, or so).

@andriijas Have you made any progress on this?


i agree, perhaps having any attributes that start data-* be passed to the modal. would be nice if multiple modals are required.


Good idea encodes



I havent figured out a good way to implement this actually.

I would like to use the naming convention of tabs with relatedTarget, and the easy part is easy:

doing $target.modal(option, this) and $.fn.modal = function (option, relatedTarget) {

But then Im stuck - need to somehow jinx in the relatedTarget into the modal instance data, or pass it in as argument on each call, which I dont like.

There is also the thing that the modal plugin should probably still work without the data-api which makes it more complicated.


i havn't wrote an implementation yet. but in my head, i feel that data-id='32' etc in the source code would be a good possible way of implementing it. would be easy and powerful, there would need to be other ways to set/get this data. but its a problem that can and im sure will be solved many ways


@encodes yeah problem is to pass the elem in somehow to the modal instance so that it can read the $(elem).data(), since the modal is instanciated once, and then reused the related target element from where the click originates needs to be passed in each time since the idea of this is that several links/sources could open the same modal.

(all this goes for collapsables as well)


+1 for this. In my case, I want to use modals everywhere the user can input something. For instance, on my calendar, when the user clicks a day it opens an "Add event" modal with the date pre-populated.


Big +1 for this. Right now I'm $('body').off('.data-api') and installing my own click handlers. Seems like a waste.


Turns out this is actually pretty easy in 2.0.3. First, add your custom data as any number of data parameters.

<li><a data-person="Zim" data-toggle="modal" data-target="#person-modal"></a></li>
<li><a data-person="Dib" data-toggle="modal" data-target="#person-modal"></a></li>

Next, modify bootstrap-modal.js to update your modal's options every time a link is clicked. Otherwise, the modal always displays the data for the first person clicked.

diff --git a/app/assets/javascripts/bootstrap/bootstrap-modal.js b/app/assets/javascripts/bootstrap/bootstrap-modal.js
index 0465cb5..9228636 100644
--- a/app/assets/javascripts/bootstrap/bootstrap-modal.js
+++ b/app/assets/javascripts/bootstrap/bootstrap-modal.js
@@ -209,6 +209,9 @@
       var $this = $(this), href
         , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
         , option = $'modal') ? 'toggle' : $.extend({}, $, $
+      if(option == 'toggle') {
+        $.extend($'modal').options, $
+      }


Finally, use the show event to stuff your custom information into the modal.

    $('#person-modal').on('show', function (event) {
        name = $(this).data('modal').options.person

If @fat can make this patch presentable and commit it, this feature req can be closed.


yeah - would love to see that incorporated. It makes sense, breaks nothing and adds a lot of value to that component.








Of course the constructor suffers the same problem. Here's a fix:

diff --git a/app/assets/javascripts/bootstrap/bootstrap-modal.js b/app/assets/javascripts/bootstrap/bootstrap-modal.js
index 0465cb5..a51813b 100644
--- a/app/assets/javascripts/bootstrap/bootstrap-modal.js
+++ b/app/assets/javascripts/bootstrap/bootstrap-modal.js
@@ -187,6 +187,7 @@
         , data = $'modal')
         , options = $.extend({}, $.fn.modal.defaults, $, typeof option == 'object' && option)
       if (!data) $'modal', (data = new Modal(this, options)))
+      else $.extend($'modal').options, option)
       if (typeof option == 'string') data[option]()
       else if (

Without this patch, modals only use the first options they were passed and ignore the ones passed to subsequent calls. With it, it uses the options as you'd expect.

Anyone willing to give this a code review? Hopefully it's time for a pull request.


@bronson please make a pull request and refer to this issue as it has been closed for 7 month but people are still actively discussing and contributing to it.


@bronson I tested the code and it worked well. Thank you for that patch.


+1, works well. Thanks


+1, great work!
i whish it will be included in the next version!!


+3 for me!! this feature is a must for modal windows!!



@kynan kynan added a commit to checklisthq/bootstrap that referenced this issue Aug 2, 2012
@kynan kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
@kynan kynan added a commit to checklisthq/bootstrap that referenced this issue Aug 14, 2012
@kynan kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.

How do I set a data value programtically without using "data-" in the HTML?

Using $('selector').data('user', value) seems to get overwritten by the last click from a data attribute.

I am trying to pass a data value from one modal to another after a successful ajax request but the data value gets overwritten. The problem is the data could also come from a HTML link instead of the first modal.

$('#modal2').data('user_id', 5) // sets user_id to 5

$('#modal2').on('show', function (event) {

$('#modal2').data('user_id', $('#modal2').data('modal').options.user_id ); // sets user_id to something else

Link on SO to better explain it:


@asacarter I do this: $('#my-modal').modal({person:'Gaz'}). If the modal is hidden, that will set modal.options.person and then call your show handler. (I think it toggles so, if it's showing, it gets hidden... fuzzy memory tho)

You need to apply the one-line constructor patch of course.


I can't get the 'show' event callback to fire. (My modal is showing.) Do I need to put that code anywhere in particular?
Edit: nevermind, copy-paste error. Works great!

@kynan kynan added a commit to checklisthq/bootstrap that referenced this issue Sep 24, 2012
@kynan kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
@kynan kynan added a commit to checklisthq/bootstrap that referenced this issue Dec 13, 2012
@kynan kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.

FYI: Playing around with 3.0.

name = $(this).data('modal').options.person
name = $(this).data('bs.modal').options.person

Can anyone confirm this?

I also think the patch has not been applied because I am only seeing the first element clicked.


Agree with @leefaus, only data-* values from the first element clicked are available as options. Tested in v2.3.1

Bit disappointing... I thought some of the previous comments alluded to this having been fixed :(

Bootstrap member

#6825 is the most recent word on this. @fat is still "noodling".


+1 Any progress on this?

Confirmed: Only the first element clicked passes data-* in v2.3.1


Is there a fund somewhere that I can contribute to fix this > 2 year old bug? :>




I have to say this is a pretty obvious bug that needs to be fixed, and it greatly increases the utility of the modal widget and the ease by which it can be used. Of course the other option is to implement relatedTarget. Both have been suggested and progress is stalled.



Bootstrap member

Folks, this is addressed in v3.0.0+ thanks to event.relatedTarget getting implemented in dbed9da.

@cvrebert cvrebert locked and limited conversation to collaborators Jun 14, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.