Question

使用：Bootstrap 4.1.3

这是一种解决方案，但这不正是我要寻找的： Bootstrap Modal Dynamic Content

我正在从外部文件获取内容（整个模式HTML），然后我需要将其显示为模式。

如何在模式中显示data

$.get("test.html", function(data) {
    ???
});

我正在尝试避免这种替代方法，在该方法中，我可以将div附加到主体，在其中放置data，然后进行模态化。

$.get("test.html", function(data) {
    //$('<div />', { id: 'holdy' }).appendTo('body');

    var $holdyDiv = $('<div />').appendTo('body');
    $holdyDiv.attr('id', 'holdy');

    //append data 
    $holdyDiv.innerHtml(data);

    //do modal
    $('#divInData').modal('show');  
});

忘了提及，此调用在页面加载完成后发生。

Answer 1

您应该使用jQuery $.load 而不是$.get，它可以为远程模式指定选择器。然后，您需要做的就是：

$('body').load("test.html #myModal",function(){
   $('#myModal').modal();
});

无论哪种方式，都必须将模式HTML 添加到正在加载模式的“主机”页面的DOM中。

演示：
https://www.codeply.com/go/AQazBWdsrZ（“主机”页面）
https://www.codeply.com/go/sE77hS1hHs（“远程”页面-仅限模式HTML）

Answer 2

如何更新iproute document事件中的模式内容？

show.bs.modal

调用show实例方法时，将立即触发此事件。如果是由单击引起的，则clicked元素可用作事件的relatedTarget属性。

这时，您可以在显示模式之前操纵内容，并触发shown.bs.modal。

$('.modal').on('show.bs.modal', function(e) {
  const id = e.relatedTarget.dataset.postid;
  
  $.get('https://jsonplaceholder.typicode.com/posts/' + id)
    .then(data => {
      $('.modal-title', this).text(data.title);
      $('.modal-body', this).html(data.body);
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-postid="1">
  Launch demo modal #1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-postid="2">
  Launch demo modal #2
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Bootstrap模式从外部文件加载整个HTML

2 个答案: