Загрузка содержимого для Bootstrap 4 Modal извне с использованием JavaScript / jQuery

Question

Я новичок в кодировании, и у меня есть проект, использующий модал Bootstrap 4. В настоящее время контент находится внутри HTML-страницы, и я хочу, чтобы контент генерировался из внешнего HTML-файла. Возможно ли это?

Чтобы прояснить это далее, я хочу поместить HTML-код модальной моды в отдельный HTML-файл и загружать модальное содержимое оттуда с помощью jQuery / JavaScript, когда это необходимо, вместо помещения его внутрьмои индексные файлы.

В настоящее время я использую этот код для создания модальных.

 if(status){
        $('#mMessage').modal()
    }

и HTML

<div class="modal fade" id="mMessage" tabindex="-1" role="dialog" aria-labelledby="mMessageLabel">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="mMessageLabel">Requirements Not Met</h4>

      </div>
      <div class="modal-body">Please select atleast one.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Любая помощь, которую вы можете оказать, будет принята с благодарностью. Спасибо.

Answer 1

Обратите внимание на метод JQuery load .

function myfunction() {
    if(status){
        $('#mMessage').load('./another_page.html');
        $('#mMessage').modal("show");
    }
}

Div с идентификатором mMessage должен быть на текущей странице. Содержимое внутри будет загружено с другой страницы.

Как обрабатывать неудачный ответ и как передавать параметры, объяснено в документации JQuery, прилагаемой выше.

Answer 2

$('#mMessage').modal("show")

Я думаю, что это может вам помочь