5

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.

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Jimmy Lin
  • 1,481
  • 6
  • 27
  • 44
  • Try [this answer](http://stackoverflow.com/questions/32958219/getting-bootstraps-modal-content-from-another-page). It worked for me. – Fabio Carvalho Nov 05 '16 at 00:41

3 Answers3

7

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');
});
Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
burunoh
  • 744
  • 7
  • 11
3

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:
Christian Gollhardt
  • 16,510
  • 17
  • 74
  • 111
  • Not realy understand you question? – Christian Gollhardt May 22 '14 at 08:35
  • The `
    ` is already in `another.page`, why should I use iFrame in the page?
     – Jimmy Lin May 22 '14 at 08:36
  • I understand: How can i include some other page into my first page "Modal Window"? Iframe is the answer. Excuse me, if I missunderstood you. Can you provide more Details about your Problem? – Christian Gollhardt May 22 '14 at 08:38
  • @Jimmy Have updated my Anwser. Is this, what you mean? – Christian Gollhardt May 22 '14 at 09:01
  • Can I put the `Modal
    ` in other page or I should put in the same page? because on my website, there are too many difference places that need Modal(iframe). I also found this website: http://modalwithwebpage.blorkmark.com/# which is like what I want, but the example also put the `modal
    ` in the same page.
     – Jimmy Lin May 22 '14 at 09:08
  • Yes, I update your answer, but the link redirect me to `amother.page`, not a popup windows using Modal. – Jimmy Lin May 22 '14 at 09:13
  • If you have readed my answer, you would know why it must be on the same page. Please look in the Manual of Bootstrap if you don't believe me. Look also at my alternative (It is your Homework) if you don't want create multiple Modal Window Markups. By the way: You can write the Modal Markup everywhere between `` if this is your Problem. Here is a working Fiddle: http://jsfiddle.net/u29Tj/1/ – Christian Gollhardt May 22 '14 at 09:27
  • Yes, I know. The problem is that there are almost 100 places that need to Modals. Write all Modals between `` and `` would make the source code ugly. – Jimmy Lin May 22 '14 at 09:36
  • Is this possible without using iframe? – lambypie Jun 13 '14 at 05:15
3

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

Ramadhianto Handiprimastono
  • 31
  • 2