Как я могу добавить фрагмент html (для модального bootstrap) в другой файл html?

Question

Так что я пытаюсь создать небольшое приложение, которое использует html/knockout/web api.

Я не хочу использовать Durandal или другую навигационную систему, если я могу это сделать без нее.

В настоящее время у меня есть три отдельные html-страницы, все из которых имеют доступ (через общий datacontext) защищенные методы данных, требующие аутентификации. Если datacontext получает ошибку 401 после доступа к веб-Api, я хочу всплывать мода загрузочного модала с функциями входа в систему, чтобы пользователь мог аутентифицироваться и продолжать свое существование.

У меня есть вид этого, обманывая и используя веб-формы asp.net с пользовательским элементом управления, содержащим функции входа в систему. Этот элемент управления пользователя включен в три отдельные страницы. Однако я теперь увяз в сложности с загрузкой скриптов и зависимостями, поэтому я хотел бы вернуть все это на более простой основе, используя простой html, если это возможно.

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

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

Answer 1

Вы можете использовать load() функции JQuery, чтобы получить HTML, а затем вводят его в модальный Bootstrap, как это:

$('#your-selector').on('click', function() { 
    $('#your-modal-selector').load('/your-file.html ', function (response, status, xhr) { 
     if (status == "success") { 
      $($this).modal('show'); 
     } 
    }); 
});