Bootstrap 3.1 and modals with remote content

Bootstrap version 3.1 will break your modals if they display remote content.

With the release of Bootstrap 3.1 the developers write that for modals with remote content this is a breaking change. That the release contains a bug fix that corrects a rather longstanding and overlooked error.

This tutorial shows how to make bootstrap 3.1 and modals with remote content work correctly.

Bootstrap 3.1 and modals with remote content

This is an update to a previous tutorial explaining how to create a Bootstrap modal that displays remote content (content that is not part of the modal markup but resides elsewhere).

For a modal to display remote content it must contain an href attribute. With that we link to the file with the remote content.

The href attribute is inserted into the line with the anchor tags that create the trigger for the modal (see the highlighted line in the markup below). In this instance it links to a file which I have simply named “remote.html”.

If you compare the markup above with that from the previous tutorial you’ll notice that the modal-content div is now completely empty. Previously only the modal-body div was (required to be) empty.

For the remote file we also need quite a few lines of code. It needs to be a working html page with a head and body section.

If you compare the markup for this remote file you’ll notice that we no longer use the modal-dialog and modal-content div tags.
DEMO - Bootstrap v3.1 Modal with remote content

If you want to see what the modal will look like if you update to version 3.1 but continue with the old markup for a modal with remote content then click on this link which uses the markup discussed in the previous tutorial about modals with remote content. The modal will still show but superimposed over another div.

In the previous tutorial about modals with remote content I also explained how you can create a modal with a remote image. Simply updating it to version 3.1 would result in an empty modal. You should be able to solve the break up quite easily with the help of the info provided in this tutorial.

A modal with remote content can be used to load ” images, scripts, frames, iframes, and a window object.” This is because the jQuery load event is used.

Check if your modals display correctly from a server and not only locally. With Safari the remote modal will display correctly locally. But Google Chrome and IE will probably not render the modals correctly on your computer (my experience is that locally IE displays the modal with a very basic styling and Chrome doesn't even display the remote content).

22 comments

Adrian - April 18, 2016 Reply

Thank you for writing this tutorial. I help me a lot for loading remote content without additional js code or 3rd party js library.
However I found an issue. Currently , I implemented this in user product orders history
A user may have more than one order. The href may look like this
href="order-detail/?id=111" rel="nofollow">ORDER-111
href="order-detail/?id=123" rel="nofollow">ORDER-123
href="order-detail/?id=155" rel="nofollow">ORDER-155

I found that after a first click of any of hyperlink, that order markup will attach to the html page.
If I click other order, it will not load again with new id, but just make the previous modal dialog visible. That is the first click order

Theo - April 18, 2016 Reply

Hi Adrian,

Thanks.

Regarding the issue you mentioned: the only solution for this is using the Varying modal content approach

Cheers, Theo

Rashad - December 17, 2015 Reply

This is good tutorial, it worked fine for me. As I understand we did it without using Javascript. So, is it possible to send data (unique ID) via POST and use loading icon?

Jeje - March 14, 2015 Reply

Great solution for displaying an HTML page! I can’t seem to get it to work if the remote file is a PHP. I have an entire auto generated gallery that I would like to display in the overlay. Is that possible?

Theo - March 15, 2015 Reply

Hi Jeje,

it’s possible to use a PHP file as a remote file. But my guess is that you use a PHP for your gallery to dynamically pull images from a database. So what you want to achieve probably won’t work because it’ll require execution of PHP commands after the modal has loaded. Why not post your script on stackoverflow.com and see if someone can provide tips or even a workable solution.

Cheers, Theo

Sanaa - October 16, 2015 Reply

Hi Jeje,
I used a PHP file as remote file to get the data from database but to show it on the modal i had to use echo ‘<>‘; inorder to see it on the modal.

princy - January 30, 2015 Reply

Thanks for the great tutorial. It has helped me a lot. but I am facing problem in IE , remote modal opens with full width. Any idea?

Theo - January 31, 2015 Reply

Thanks!

Checked your issue in IE version 11 and the modal opens with normal width. For older versions did you check this section: http://getbootstrap.com/getting-started/#support ?
If you’re certain that there is a bug I’d suggest you report it to the Bootstrap developers ( https://github.com/twbs/bootstrap/issues ).

Cheers, Theo

Kerry - December 17, 2014 Reply

Is it possible to trigger the modal window on page load? Example, you share a link to a gallery page and a specific image in that gallery is already on display in the modal window

Theo - December 17, 2014 Reply

Hi Kerry,

you can use the option ‘show’ for a modal (as discussed in this tutorial: http://tutsme-webdesign.info/bootstrap-3-modals/ ).

Dan - December 5, 2014 Reply

The problem I’m getting is that I’ve a list of pages, each with a unique ID to them, and when I click on the first link it loads the content fine (I’m loading a PHP page which grabs from a mySQL database), but subsequent links then show the first link as well, even though the link is pointing to the correct place. Any ideas?

Theo - December 6, 2014 Reply

Hi Dan,

I would try a Varying modal content approach: http://getbootstrap.com/javascript/#modals-related-target

Each trigger could have an href-attribute (as in my tutorial above) which would link to one of your php pages.

Cheers,

Theo

Raz - September 26, 2014 Reply

Thank you!! This is by far the best answer I have found online (after a while). Thank again!

Cristian - September 25, 2014 Reply

Thanks for sharing this tutorial. People like you make the internet a better place. Greetings from Chile.

add - August 20, 2014 Reply

how to validation form on remote page

Theo - August 20, 2014 Reply

Hi Add,

remote form will validate in the normal way. Since the content in this tutorial doesn’t require validation I’ll refer to the tutorial about a contact form in a modal: http://tutsme-webdesign.info/bootstrap-3-contact-modal/ .
Use the HTML validation method for this contact form as explained in this tutorial: http://tutsme-webdesign.info/bootstrap-validation-states-dynamically/ .
Make the form remote by taking out the entire section between the div’s with class “modal-content” and insert this in the body section of a new html file. Save this (e.g. as “remoteform.html”).
For the modal trigger link (see line 2 in Modal markup) change href=”#myModal” into data-target=”#myModal” and add href=”remoteform.html”.

add - August 21, 2014 Reply

Hi THEO
it work Thank you So much….

vayu - August 1, 2014 Reply

thank u sir….thank u-5…..superb

Sarfaraz Ahmed - June 29, 2014 Reply

Hello

This is superb example of loading remote file. You are awesome.

Ahmad Rio - May 30, 2014 Reply

Terima kasih … 😀

Theo - May 30, 2014 Reply

And Thank You too Ahmad.

zuhry - April 26, 2014 Reply

thank u very much ser… u save my live now 😀

Add your comment

Related Posts