来自另一页面的Bootstrap Modal

Question

来自另一页面的Bootstrap Modal

Jim*_*Lin 4 jquery modal-dialog twitter-bootstrap

当我尝试Bootstrap Modal在我的代码中使用时,我遇到了一些问题.

HTML:

<a href="http://another.page" data-toggle="modal">Another Page</a>

Run Code Online (Sandbox Code Playgroud)

要么

<a href="http://another.page" data-toggle="modal" data-target="#myModal">Another Page</a>

Run Code Online (Sandbox Code Playgroud)

我想模态another.page到我的页面,但它不起作用.

在another.pageIS的样子:

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

Run Code Online (Sandbox Code Playgroud)

我不想在我的代码中加载another.pageas <div>,因为我需要使用模态的地方太多了.

我错过了重要的事吗？

非常感谢你.

Answer 1

bur*_*noh 6

你想从第1页打开第2页而不是打开第二页内的模态吗？如果是,这是一个解决方案:

在您将使用的第一页:

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

Run Code Online (Sandbox Code Playgroud)

在第二页,您将插入您的模态和以下脚本:

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Chr*_*rdt 3

利用该元素iframe

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

Run Code Online (Sandbox Code Playgroud)

也许你想设计它的风格

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

Run Code Online (Sandbox Code Playgroud)

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

需要明确的是，您根据您的评论阅读了手册：

查看data-target链接的属性：它是HTML Element Modal Window. Boostrap 需要它来显示和隐藏窗口。您不应该将其链接到您的页面。您需要将其链接到您的模态！在模态体中，您使用 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>

Run Code Online (Sandbox Code Playgroud)

选择

给你的家庭作业：

为每个链接data-iframemodal指定一个 Iframe 属性。
为每个具有以下属性的属性设置一个 Clickhandler data-iframemodel：
- 通过 JS 打开一个新的 Modal。http://getbootstrap.com/javascript/
- 使用 iframe 设置内容，并将发件人 href 属性作为从事件中提取的源。

归档时间：	12 年，4 月前
查看次数：	37077 次
最近记录：	9 年，7 月前