Bootstrap Modal from another page

jquery, modal-dialog, twitter-bootstrap

Solution

Make use of the element `iframe`

<div class="modal-body">
    <iframe src="another.page" />
</div>

And maybe you want to style it

.modal iframe {
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/u29Tj/3/

Just to be clear, that you read the manual, based on your comments:

Look at the `data-target` attribute of your link: It is an anchor to the `HTML Element` `Modal Window`. You need this for Boostrap to show and hide the window. You should not linking it to your page. You need to link it to your Modal! In the Modal Body you use the Iframe.

<!-- trigger modal -->
<a data-toggle="modal" href="#myModal">
  Launch demo modal
</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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <iframe src="http://stackoverflow.com/questions/23801446/bootstrap-modal-from-another-page/23801599" />
      </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>
  </div>
</div>

Alternative

Homework for you:

- Give each link `data-iframemodal` Attribute you want to have a Iframe.

- Set a Clickhandler for each attribute which has `data-iframemodel`:

- Open a new Modal via JS. http://getbootstrap.com/javascript/

- Set Content with iframe and as source you extract from the event the senders href attribute.

Problem

I've met some problems when I try to use `Bootstrap Modal` in my code. HTML: ``` <a href="http://another.page" data-toggle="modal">Another Page</a> ``` or ``` <a href="http://another.page" data-toggle="modal" data-target="#myModal">Another Page</a> ``` I'd like to modal `another.page` to my page, but it doesn't work. the `another.page` is looks like: ``` <html> <body> <div id="myModal" class="tm-modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"> <div class="tm-modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button> <h6>Modal Heading</h6> </div> <div class="tm-modal-body"> <p>One fine body <85> </p> </div> <div class="tm-modal-footer"> <button class="tm-btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="tm-btn tm-btn-recommand">Save changes</button> </div> </div> </body> </html> ``` I don't want to load the `another.page` as a `<div>` in my code, because there are too many place that I need to use modal. Did I missed something important? Thank you very much.

Original source

Related problems