Bootstrap 4加载模式 - 来自其他页面的内容

时间:2018-02-22 16:43:34

标签: javascript html5 bootstrap-4

我想从另一个页面加载模态的内容。 这是我的代码:

     <!--End-Banner-->
  <footer class="footer">
        <div class="container">
        <div class="col-md-6"></div>
        <a href="imprint.html" role="button" data-target="#theModal"  data-toggle="modal" class="btn btn-outline-success">Imprint</a>
        <button type="button" class="btn btn-outline-success">Privacy Policy</button>
        </div>
  </footer>

<!--jquery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <!--Scripts-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/imprint.js" type="text/javascript"></script>

  <!--Modal-->
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
      </div>
    </div>
  </div>

就像你看到我想在我的模态内容中加载imprint.html的内容。 我尝试了另一个问题的解决方案 - link to solution 但它对我不起作用。

关注我的imprint.html

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
</div>
<div class="modal-body">
  <p>Modal body text goes here.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis praesentium ipsam quidem sapiente nostrum? Ipsa saepe aperiam nulla cum repellat iure, porro dolor, adipisci totam quisquam, vel. Perferendis, nihil, sed!
  </p>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

现在正在讨厌什么? 模态开始但不加载,如果我在控制台中查看模态内容保持为空。

你能救我吗? 非常感谢你。

0 个答案:

没有答案