来自另一个页面的引导模式答案

【问题标题】：Bootstrap Modal from another page来自另一个页面的引导模式
【发布时间】：2014-05-22 08:22:21
【问题描述】：

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

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>

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

another.page 看起来像：

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

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

我错过了什么重要的事情吗？

非常感谢。

【问题讨论】：

试试this answer。它对我有用。

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

您要从第 1 页打开第 2 页，然后在第二页中打开模态框吗？如果是，这里有一个解决方案：

在您将使用的第一页：

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

在第二页，您将插入您的模式和以下脚本：

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

【讨论】：

【解决方案2】：

利用元素iframe

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

也许你想给它设置样式

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

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

为了清楚起见，您根据您的 cmets 阅读了手册：

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

替代方案

给你的家庭作业：

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

【讨论】：

不太明白你的问题？
<div class="tm-modal-body">已经在another.page中，为什么要在页面中使用iFrame？
我了解：如何在我的第一页“模式窗口”中包含其他页面？ iframe 就是答案。对不起，如果我误会了你。您能否提供有关您的问题的更多详细信息？
@Jimmy 更新了我的 Anwser。这就是你的意思吗？
我可以将Modal <div> 放在其他页面中还是应该放在同一页面中？因为在我的网站上，有太多不同的地方需要 Modal(iframe)。我还找到了这个网站：modalwithwebpage.blorkmark.com/#，这和我想要的一样，但该示例还将modal <div> 放在同一页面中。

【解决方案3】：

利用元素div

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

制作脚本

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

改变

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

这是其他解决方案祝你好运

【讨论】：

我试过 load_page('google.com') 没用...有什么建议吗？阿达萨兰兰甘？