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”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Bootstrap version 3.1 Modal with remote content</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap core CSS --> <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script> <![endif]--> </head> <body> <a data-toggle="modal" class="btn btn-info" href="remote.html" data-target="#myModal">Click me !</a> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script> </body> </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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Remote file for Bootstrap Modal</title> </head> <body> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <!-- /modal-header --> <div class="modal-body"> <p>Excitavit hic ardor milites per municipia plurima, quae isdem conterminant, dispositos et castella, sed quisque serpentes latius pro viribus repellere moliens, nunc globis confertos, aliquotiens et dispersos multitudine superabatur ingenti.</p> </div> <!-- /modal-body --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> <!-- /modal-footer --> </body> </html> |
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.
22 comments
Adrian - April 18, 2016
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-111href="order-detail/?id=123" rel="nofollow">ORDER-123href="order-detail/?id=155" rel="nofollow">ORDER-155I 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
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
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
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
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
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
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
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
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
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
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
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
Thank you!! This is by far the best answer I have found online (after a while). Thank again!
Cristian - September 25, 2014
Thanks for sharing this tutorial. People like you make the internet a better place. Greetings from Chile.
add - August 20, 2014
how to validation form on remote page
Theo - August 20, 2014
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
Hi THEO
it work Thank you So much….
vayu - August 1, 2014
thank u sir….thank u-5…..superb
Sarfaraz Ahmed - June 29, 2014
Hello
This is superb example of loading remote file. You are awesome.
Ahmad Rio - May 30, 2014
Terima kasih … 😀
Theo - May 30, 2014
And Thank You too Ahmad.
zuhry - April 26, 2014
thank u very much ser… u save my live now 😀