CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3
evanvee
evanvee

Reputation: 315

Bootstrap Remote Modals

I am having a trouble loading a Modal from a remote page. The content is not being loaded into the modal but being loaded on top of the page. The modal doesn't even show up. Why is this not loading into the modal?

Index Page

 <script>
$('#modal').modal({
    keyboard: false,
    remote: "second.html",
    show: false
})
</script>

<a data-toggle="modal" href="second.html" data-target="#modal" class="btn btn-primary btn-large">Load External Page</a>
<div class="modal fade" id="modal" 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" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </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>

Second Page

<p>TEXT GOES HERE</p>

Screenshot:

enter image description here

Upvotes: 0

Views: 278

Answers (1)

Alex Kir
Alex Kir

Reputation: 97

If you use bootstrap 3.1, the new one that came out just couple of days ago, they changed the remote-modal behaviour. They did not changed the doc for it though.

As from 3.1 version the content of remote modal should not be placed in modal root but in .modal-content div

Bug on github exlaining the undocumented new feature

Upvotes: 1

Related Questions