Bootstrap Modal from another page

2019-01-26 18:08发布

站内问答 / jQuery
1310 3 4

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.

3条回答
虎瘦雄心在
2楼-- · 2019-01-26 18:54

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');
});
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-01-26 19:01

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

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-01-26 19:10

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:
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)