Как вызвать модальное окно которое находится в отдельном htm?

Question

[Mracula]

Вот строка вызова модального окна

<a href="#" data-reveal-id="myModal" class="btn btn-default btn-lg">Заказать</a>

Нашел как добавить определенный html на страницу в любое место

jQuery.ajax({
url: "mod1.html",
dataType: "html",
success: function(response) {
document.getElementById('container1').innerHTML = response;
}
});
</script>

Добавляем <div id="container1"></div>

У меня в этом mod1.html лежит контент модального окна. Как вызвать данное окно?

Answer 1

[Aricus]

Первоначально окно нужно скрыть под

#container1 {
  display: none;
}

Ajax нужно подвесить на клик по ссылке (которую нужно сделать не ссылкой, а чем-то другим, чтобы страница не обновлялась), а после отработки добавить класс для проявления (кстати, рекомендую изучить jquery: для работы с html в разы проще чистого js):

$('[data-reveal-id="myModal"]').click(function() {
  jQuery.ajax({
    url: "mod1.html",
    dataType: "html",
    success: function(response) {
      $('#container1').html(response);
      $('#container1').addClass('appear');
    }
  });
});

Ну а как именно проявлять, вариантов куча.

Comments

[Mracula]

Нашел вот такой вариант

<a data-reveal-id="myMod" class="mybutton" href="http://modal/mod2.html" data-reveal-ajax="true">
        Click Me For A Modal
        </a>
    </div>

    <div id="myMod" class="reveal-modal">
        <a class="close-reveal-modal"></a>
    </div>

модальное окно с таким id всплывает, но пустое не подгружает туда указанный html

[Aricus]

Я с этим плагином не знаком, так что конкретно по нему ничего не посоветую.

[Mracula]

Aricus, В общем решил с помощью iframe