时间戳

首页 > 解决方案 > 引导模式加载具有特定元素的远程内容

javascript - 引导模式加载具有特定元素的远程内容

问题描述

我的外部 URL 看起来another.php

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
  <body>
  <h1>This is a Heading</h1>
   <div id="thisdivonly">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
 </body>
</html>

我只想加载一个特定的 div 作为thisdivonly包装。

我努力了：

JavaScript

$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href #thisdivonly"));
});

模态 HTML

<a href="another.php" data-toggle="modal" data-target="#myModal" 
class="btn btn-default">
   Modal
</a>

<!-- Default bootstrap modal example -->
<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-label="Close"><span aria- 
 hidden="true">&times;</span></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>
</div>

标签： javascriptjquerybootstrap-4bootstrap-modal

解决方案

推荐阅读