Блог

Я хочу динамически добавлять фрагмент 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">amp;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, а затем вызвать для него метод bootstrap?

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

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

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

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

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

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

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

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

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

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

Однако мое личное предпочтение заключается в том, чтобы иметь модальную оболочку внутри 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. Он также немного более гибкий (опять же, только для мнений), поскольку вы можете передавать ему дополнительные атрибуты данных. В моем обычном использовании я также передаю атрибут size, чтобы определить, насколько большим должен быть Modal.