why is the data-remote inserted in .modal-body #5161

webpatser opened this Issue Sep 16, 2012 · 20 comments

I want to reuse the modal for different URL's. Now I cannot set the Header/Footer + a bigger modal gets double scrollbars now :-(

Is there a way to replace the modal completely so I can remote load the modal-header/body and footer?


I fixed it by changing line 93 in the bootstrap:

this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
this.options.remote && this.$element.find('.modal-body').parent().load(this.options.remote)

maybe write an option for it?


Should be able to just do


Hey @webpatser,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

  • should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.



Hello @malandrew & @webpatser,

I created a jsfiddle illustrating the problem:


Let me know if you need something else.


Bootstrap's default modals fell a bit short for my purposes as well so I extended the class to add some more functionality, including handling AJAX a little smoother. See here for a demo: http://jschr.github.com/bootstrap-modal/

Maybe that will help you in the meantime until hopefully some of these issues get addressed.


Is this the same problem that I'm seeing, where I want to have a modal template used for a gallery of thumbnails, each thumbnail click pops up a modal, the modal loads the image data from date-remote url provided. However, I was expecting that different images be loaded when providing different data url through the definition of each thumbnail, instead, I find the first image loads, but subsequent clicks on different thumbnails simply show the modal with the first image that has loaded. I was expecting the proper data-remote url to be loaded.





Feels wrong to only update the body of a modal.



Bootstrap member
fat commented Feb 8, 2013

if you want more advanced templating i recommend just building the modal out in your templates… we're not going to be extending this further

@fat fat closed this Feb 8, 2013

Hello @fat ,

Thank you for taking the time to answer this, but I think you might have misread what the issue was about. It was not about "more advanced templating".No extension on the "templating" is needed.

The change needed is moving from this:

this.options.remote && this.$element.find('.modal-body').load(this.options.remote)

To this:

this.options.remote && this.$element.load(this.options.remote)

Maybe you have mistaken this issue with another one?


+1 for this simple change, instead of inject remote url into the .modal-body, inject it to the parent of the body

make modal more flexible


Right, the present behavior is a head scratcher. Why include the feature at all if it's limited to updating modal-body? Seems like wasted effort. And what are the odds that you want to only update the modal-body and nothing else? I'd guess well less than half the time. Probably more like 5% or so of use cases are completely satisfied by the current behavior.


I honestly think this is just a misunderstanding. @fat-kun's closing message doesn't really seem related with the rest of the issue. He must have closed this issue by mistake.

I don't know what's the standard procedure in this case though. Open another issue?

Bootstrap member

Yeah, opening another issue, generally.


+1 - with a slight change the current behaviour could be much more flexible!

@alexhayes alexhayes added a commit to alexhayes/bootstrap that referenced this issue Mar 22, 2013
@alexhayes alexhayes Refs #5161: Maintains backwards compatibility while allowing for remo…
…te content that contains model header, body and footer.

Refs #7149: Maintains backwards compatibility while allowing for remote content that contains model header, body and footer.




@alexhayes alexhayes added a commit to alexhayes/bootstrap that referenced this issue Jul 17, 2013
@alexhayes alexhayes Refs #5161: Added option 'remoteinbody' to control whether the remote…
… should be placed in the body or not. Set data-remoteinbody="false" to control via markup.

For Bootstap 2.3.2, I wrote a simple 'remote-modal' handler. Here's a crude fiddle demonstrating it: http://jsfiddle.net/cvqyv/1/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment