Bootstrap 3 Modal displaying remote content

The markup below will not work correctly with Bootstrap version 3.1 or later. Click on this button to visit an updated version of this tutorial. As a follow-up to our previous tutorial we’ll now look into how to create a Bootstrap 3 modal displaying remote content.

Bootstrap 3 modal displaying remote content

A Bootstrap modal can also display content that is not part of the modal markup but resides elsewhere. To achieve this effect the markup for this type of modal has to contain an href attribute that links to the file with the remote content.

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

Notice also the the modal body div is completely empty. We need this to be empty because it’s reserved for the content in the remote file. If you forget this and leave some content in this modal-body div it will overrule that remote file.

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. And the body section requires a complete modal dialog section.

Modal with remote content – Demo

A user will not notice anything different from a normal Bootstrap modal. So this kind of solution is only interesting if you want to pull content from a different location into the modal.

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.

If you do want to load an image into the modal this way you should insert the image tag into the modal body div in the remote file.

We don’t need to change anything in our file with the modal trigger but only in the remote file.

Modal with image left floating – Demo

In this demo the image floats to the left and the paragraph displays to its right and below. To achieve this you need to insert the Bootstrap class pull-left into the image tag.

And to have the footer with the buttons display beneath the image and text you need to insert the Bootstrap class clearfix in the opening div tag for the modal body.

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


mp - September 17, 2014 Reply


What if I want to load additional content into the modal. Basically remove the current content and load something different into the same modal window?

Theo - September 17, 2014 Reply

Hi Marvin,

do not know why or what you want to achieve but maybe you can find what you want to do here:

Matt - May 30, 2014 Reply

Thanks for this! Saved me a ton of time.

Paul - May 2, 2014 Reply

Hi Theo thank you for great help I had problems with Chrome localy ! Only one thing you should write in second file model content, model dialog, because you will have two windows of model. so it should be deleted from remote file.

Theo - May 3, 2014 Reply

Hi Paul,

glad to have helped. The “two window modal” effect occurs when you use Bootstrap version 3.1 or later with the markup in this tutorial. The correct markup for the modal with Bootstrap version 3.1 can be found in this tutorial:

zuhry - April 29, 2014 Reply

can i create button inside a frame for close the modal???

Theo - April 29, 2014 Reply

If the button has to close the modal you should not put it inside a remote frame. Just use the markup shown in the tutorial for the modal (it already contains a close button).

zuhry - April 29, 2014 Reply

i create one modal with remote content, in remote content page have pagination control, when i click the pagination number, my browser directly redirect to the oringinal url content. so could you help me for fix it?

Theo - April 29, 2014 Reply

Hello Zuhry,

the pagination as part of the remote page should work fine and direct the user to the URL that you include for that number in the pagination list. Created one myself and it works fine. Cannot help you fix it though without seeing the actual code in your pages.

Ashok - April 1, 2014 Reply

Hi, This is a nice tutorial with explanation, First time it is working fine but when i try to close model second time it is not working in your demo
Could you please fix it……thanks

Theo - April 1, 2014 Reply

Hi Ashok,

thanks for noticing this. I checked and this happens with all the modals based on older Bootstrap 3 versions. Modals based on Bootstrap 3.1 do not seem to have this problem. I already wrote an update for this tutorial about Modals with remote content that you can find here:



Add your comment

Related Posts