Question

我偶然发现了一个与我相似的问题，但不完全是我想要的（Fancy box, grab from url）。我想用bootstrap模态做同样的事情。我确实通过添加data-remote找到了一些相关的教程，但它不起作用。这也不是我想要做的。我想要的只是一个模态。不是标题，主要部分或页脚的任何代码。所有这些都将包含在外部页面中（该页面实际上仍位于服务器上）。所以基本上会包含像<a href="/chat/alternate" class="action-modal">faq</a>这样的链接，它会打开一个裸模态

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
//ajax loads the external page stuff into here.
</div>

然后在外部页面（在同一台服务器上）将包含如下内容：

<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">
    ...
  </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><!-- /.modal-content -->

我希望这是可能的。谢谢你的帮助！

Answer 1

我明白了。在主页面上，输入

<a href="" data-toggle="modal" data-target=".modal" data-remote="URL_HERE">TEST/a>

以及：

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
</div>

然后简单地在远程站点上放置这样的东西。

<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">title</h4>
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  <a href="" class="btn btn-primary" target="_blank" role="button">Go! &raquo;</a>
</div>
</div>
</div>

Bootstrap从另一个文件打开内容

1 个答案: