Bootstrap модальная загрузка всего HTML из внешнего файла

Question

Использование: Bootstrap 4.1.3

Вот одно из решений, но это не совсем то, что я ищу: Модальное динамическое содержимое Bootstrap

Я получаюсодержимое (весь модальный 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

Как насчет обновления модального содержимого события show.bs.modal?

show.bs.modal

Это событие происходитнемедленно, когда вызывается метод экземпляра show.Если вызвано щелчком, элемент, по которому щелкнули, доступен как свойство 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>