bootstrap动态加载弹出

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  弹出框
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">弹出框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- 弹出框内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

// 使用jQuery的ajax方法动态加载内容
$.ajax({
  url: 'content.html',
  success: function(response) {
    $('#myModal .modal-body').html(response);
  }
});

// 使用原生JavaScript的fetch方法动态加载内容
fetch('content.html')
  .then(response => response.text())
  .then(data => {
    document.querySelector('#myModal .modal-body').innerHTML = data;
  });