Skip to content
This repository

Pass data arguments to modal? #531

andriijas opened this Issue · 48 comments


Jacob fat closed this
Andreas Cederström

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. :-)


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 :(

Peter Yanovich
fl00r commented

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.

Andreas Cederström

@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.

Jim Ryan

+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?

Andreas Cederström
Mark Tooth

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

Brian Jensen

Good idea encodes


Andreas Cederström

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.

Mark Tooth

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

Andreas Cederström

@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)

Kyle Hawkins

+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.

Jason Ellis


Bogdan Soos


Scott Bronson
bronson commented

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

Scott Bronson
bronson commented

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.

Dirk Brünsicke
d1rk commented

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

cipater commented


Laurent Van Winckel


Ofer Herman
oferh commented


Mark Pope
scobal commented


Scott Bronson

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.

Andreas Cederström

@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.

Carl Littke


Kevin Ohashi

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

Milq Media


Tom Witherington
tommyw commented

+1, works well. Thanks

Alexandre Jobin
skoub commented

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


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



Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber 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:

Scott Bronson

@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!

Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Ênio Lopes eniolopes referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Lee Faus
leefaus commented

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.

Adam George
asgeo1 commented

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 :(

Chris Rebert

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

Andy Brudtkuhl

+1 Any progress on this?

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

Alvin Crespo


Justin L.
jtal commented

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

Simon Westh Henriksen


Jim Constantine

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.

Miguel Ferreira


Chris Rebert

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.