jquery - Bootstrap Modal from another page

Question

Welcome To Ask or Share your Answers For Others

jquery - Bootstrap Modal from another page

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:21:41+0000

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');
});

Categories

jquery - Bootstrap Modal from another page

jquery - Bootstrap Modal from another page

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags