Bootstrap Modal from another page

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>

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

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.

burunoh

Do you want from the page 1 open the page 2 and than open the modal inside this second page? if yes, here is a solution:

At the first page you'll use:

<a href="second.html#myModal" class="btn btn-primary"> Open Modal </a>

At the second page you'll insert your modal and the follow script:

(function() {
  'use strict';

  function remoteModal(idModal) {
    var vm = this;
    vm.modal = $(idModal);

    if (vm.modal.length == 0) {
      return false;
    }

    if (window.location.hash == idModal) {
      openModal();
    }

    var services = {
      open: openModal,
      close: closeModal
    };

    return services;

    // method to open modal
    function openModal() {
      vm.modal.modal('show');
    }

    // method to close modal
    function closeModal() {
      vm.modal.modal('hide');
    }
  }
  Window.prototype.remoteModal = remoteModal;
})();

$(function() {
   window.remoteModal('#myModal');
});

Make use of the element div

<div class="modal-body">
   <div id="modal-isi-body"></div>
</div>

and make script

<script>
    $(document).ready(function(){
        $("#myBtn").click(function(){
            $("#myModal").modal();
            load_page('http://another.page');
        });
    });

    function load_page(url){
        $('#modal-isi-body').load(url,function(){});
    }
</script>

and change

<a href="#" id="myBtn">Another Page</a>

this is other solution good luck

来源：https://stackoverflow.com/questions/23801446/bootstrap-modal-from-another-page

标签

jquery

twitter-bootstrap

modal-dialog