Question

我无法正确地将内部/外部页面加载到任何类型的模式或半透明窗口中。我尝试了各种加载方法，由于某种原因，我只是缺少明显的方法，或者在使用的资源中似乎找不到严重的冲突。我正在使用attr数据远程。

我创建了一个简单的数字笔。 https://codepen.io/anon/pen/Vgzemx

加载内容的模式：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5>Modal title</h5>
        <button type="button" class="btn-default close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

带有模式按钮的容器：

<div class="container">
  <div class="row p-5">
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Test_script" data-target="#myModal">Modal 1</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Manual_testing" data-target="#myModal">Modal 2</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Test_automation" data-target="#myModal">Modal 3</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Capacity_management" data-target="#myModal">Modal 4</button>
    </div>
  </div>
</div>

jQuery来加载内容：

<script>
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function() {
    $($(this).data("target") + ' .modal-content').load($(this).attr('data-remote'));
});
</script>

以下是完整的代码段，无法正常工作并显示一般错误：

$('body').on('click.modal.data-api', '[data-toggle="modal"]', function() {
    $($(this).data("target") + ' .modal-content').load($(this).attr('data-remote'));
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
  
</head>
<body>
  
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5>Modal title</h5>
        <button type="button" class="btn-default close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  
<div class="container">
  <div class="row p-5">
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Test_script" data-target="#myModal">Modal 1</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Manual_testing" data-target="#myModal">Modal 2</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Test_automation" data-target="#myModal">Modal 3</button>
    </div>
    <div class="col-3">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-remote="https://en.wikipedia.org/wiki/Capacity_management" data-target="#myModal">Modal 4</button>
    </div>
  </div>
</div>
  
</body>
  
</html>

但是，无论我如何尝试，都无法加载任何外部内容页面。我知道原始功能已在4中弃用。我已经看到其他人指出他们找到了一种解决方法。但是，我无法找到当前加载的代码。

是否有更好的方法来处理？我一直在努力，似乎无法独自提出解决方案。

感谢您对此的所有关注，并希望这有助于为正在寻求使此功能起作用的其他人做出贡献。

在jQuery的完整版本中使用.load时，bootstrap 4模态无法加载数据远程

0 个答案: