Bootstrap从另一个文件打开内容

问题描述

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

I stumbled across a similar question to mine, but not exactly what I want (Fancy box, grab from url). I want to do the same thing but with bootstrap modals. I did find some tutorials on this by adding data-remote and it does not work. Also it is not exactly what I want to do. What I want is just simply a modal. Not any of the code for the header, main part or the footer. All of that will be included in the external page (the page is still actually located on the server). So basically a link like this <a href="/chat/alternate" class="action-modal">faq</a> will be included and it will open a bare modal

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

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

Then on the external page (that is on the same server) would contain something like this:

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

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

I hope this is possible. Thanks for the help!

推荐答案

我想通了。在主页面上，输入

I figured it out. On the main page, put

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

然后只需在远程网站上输入这样的东西。

Then simply put something like this on the remote site.

<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从另一个文件打开内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！