Как загрузить другой HTML-файл в Magnific Popup с помощью функции AJAX?

Question

Как загрузить другой файл HTML (на том же сервере) в Magnific Popup, тип AJAX? Я посмотрел на исходный код http://dimsemenov.com/plugins/magnific-popup/ но не могу заставить его работать. Другие типы всплывающих окон работают нормально, такие как изображения, видео и фреймы. Я, вероятно, пропускаю некоторые важные коды AJAX? После нажатия на ссылку, всплывающее окно показывает текст "Загрузка..." и не загружает файл HTML.

Вот упрощенный код до сих пор.

<a href="ajax.html" class="popup-ajax">Open ajax</a>

JS:

$('.popup-ajax').magnificPopup({
    type: 'ajax'
});

файл ajax.html:

<div id="ajax-content" class="example-popup">
    <p>Content</p>
</div>

CSS для файла / всплывающего окна ajax:

.example-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

Я не знаю AJAX, поэтому пример кода был бы очень полезен. Любая помощь будет оценена. Спасибо!

Изменить: не знал, что AJAX не работает без (локального) сервера. Это немного неловко, но я оставлю это сообщение для тех, кто совершит ту же ошибку.

Answer 1

Вот так, вы делаете это правильно. Если по-прежнему не удается получить его, проверьте, что класс правильный и загружены файлы js.

Проверьте также консоль ошибок, если у вас есть какие-либо ошибки JS, прежде чем они не будут работать.