Bootstrap 3 with remote Modal

Question

I just started a new project with the new Twitter Bootstrap release : bootstrap 3. I can't make the Modal work in the remote mode. I just want that when I click on a link it shows the modal with the content of the remote url. It works but the modal layout is completely destroyed.

Here is a link to a jsfiddle : http://jsfiddle.net/NUCgp/5/

The code :

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" 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 class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                  <h4 class="modal-title">Modal title</h4>              </div>             <div class="modal-body"><div class="te"></div></div>             <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>         </div>         <!-- /.modal-content -->     </div>     <!-- /.modal-dialog --> </div> <!-- /.modal --> 

Can anyone make this simple example work ?

Answer 1

Regarding the remote option for modals, from the docs:

If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element.

That means your remote file should provide the complete modal structure, not just what you want to display on the body.

Bootstrap 3.1 Update:

In v3.1 the above behavior was changed and now the remote content is loaded into .modal-content

See this Demo fiddle

Boostrap 3.3 Update:

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

Answer 2

For Bootstrap 3

The workflow I had to deal with was loading content with a url context that could change. So by default setup your modal with javascript or the href for the default context you want to show :

$('#myModal').modal({         show: false,         remote: 'some/context' }); 

Destroying the modal wouldn't work for me because I wasn't loading from the same remote, thus I had to :

$(".some-action-class").on('click', function () {         $('#myModal').removeData('bs.modal');         $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });         $('#myModal').modal('show'); }); 

This of course was easily refactored into a js library and gives you a lot of flexibility with loading modals

I hope this saves someone 15 minutes of tinkering.