Динамически добавлять HTML и вызывать модальные

Question

Я хочу динамически добавить кусок HTML к своему телу, а затем использовать его для отображения модального окна. modal.html является точной копией примера на сайте Bootstrap 4:

<div class="modal" tabindex="-1" role="dialog" id="dlgModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Я загружаю это, используя этот код:

$('body').append("modal.html");

Когда я проверяю, существует ли идентификатор, я нахожу объект в консоли разработчика, но вызов modal() для него не имеет никакого эффекта:

» $("#dlgModal")
← Object { context: HTMLDocument http://127.0.0.1/index.html, selector: "#dlgModal" }

» ​$("#dlgModal").modal()   /* nothing happens */

Как я могу загрузить HTML через Javascript, а затем вызвать для него метод начальной загрузки?

Answer 1

Код, который вы выполняете, т.е. $('body').append("modal.html");, просто добавит текстовый узел 'modal.html' как дочерний элемент тела. Он не загрузит файл 'modal.html' с вашего сервера.

Предполагая, что файл modal.html обслуживается вашим сервером на <hostname>/modal.html, ваш JS должен выглядеть примерно так:

$.get('/modal.html', function(content) {
    $('body').append(content);
});

$.get('/modal.html') загружает файл 'modal.html' с вашего сервера. Функция обратного вызова выполняется, когда файл загружается с сервера, после чего вы можете добавить возвращенное содержимое в «тело».

PS: Чтобы показать модал, вам нужно передать строку 'show' в .modal функцию. например. ​$("#dlgModal").modal('show')

Answer 2

Как уже указывали другие, ваше использование .append() неверно, так как в вашем примере это будет буквально просто выводить текст 'modal.html'.Ваш триггер для загрузки модального окна также потерпит неудачу, потому что вы загружаете модальный HTML-шаблон вне DOM.Простое решение будет следующим:

$.ajax({
  url: 'modal-template.html',
  success: function(data) {
    $('body').append(data);
    $("#modal-id").modal();
  }
});

В приведенном выше коде мы используем встроенную поддержку JJuery AJAX для загрузки вашего HTML-шаблона.При успешной загрузке мы берем эту информацию как data и добавляем ее к body.В этот момент ваш модал и соответствующий ему идентификатор теперь существуют в Dom, поэтому мы запускаем модал. Однако предпочтение

My personal заключается в том, чтобы иметь модал 'shell' внутри HTML по умолчанию:

<div class="modal fade" tabindex="-1" id="your-modal" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content"></div>
  </div>
</div>

Оттуда вы вставляете содержимое в модальное состояние при необходимости с помощью следующего jQuery:

$('body').on('click', '[data-toggle="modal"]', function(event) {
  var m_target = $(this).data("target"),
      m_path = $(this).attr("href");

  $(m_target + ' .modal-content').load(m_path); 
});

$('#your-modal').on('hidden.bs.modal', function (e) {
  $(this).find('.modal-content').empty().html('');
  $(this).modal('dispose');
});

Первый бит позволяет загружать модальное содержимое в существующий пустой модальныйшаблон.Второй гарантирует, что, когда модальное окно закрыто, оно должным образом очищается, что устраняет потенциальную проблему, когда следующий модальный триггер может загрузить кэшированную / старую информацию (особенно если вы ссылаетесь на недопустимый URL-адрес).Как я уже сказал ... этот метод - просто мое предпочтение, потому что он хранит идентификатор, который уже является частью DOM.Это также немного более гибко (опять же, только мнение), поскольку вы можете передать ему дополнительные атрибуты данных.В моем обычном использовании я также передаю атрибут размера, чтобы определить, насколько большим должен быть модал.

Answer 3

Я перепутал несколько звонков.Я должен был использовать load(), но выполнение этого в моем body удаляло бы все, что уже было там, поэтому я добавил контейнер:

$('body').append("<div id='messageboxContainer'></div>");
$('#messageboxContainer').load("modal.html");