Я пытаюсь загрузить страницу в модальный DIV, но, кажется, что-то упускаю (вероятно, очевидно!). Вот что у меня есть.
Проблема Страницы не загружаются в div, вместо этого нажатие на ссылки просто переходит на страницу
В моем разделе <head>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/load_modal.js"></script>
Мой скрипт load_modal.js выглядит так:
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 600,
height: 400,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
}
});
$(".modal").on("click", function(e) {
e.preventDefault();
$("#dialog").html("");
$("#dialog").dialog("option", "title", "Loading...").dialog("open");
$("#dialog").load(this.href, function() {
$(this).dialog("option", "title", $(this).find("h2").text());
//$(this).find("h1").remove();
});
});
})
И ссылки, которые я пытаюсь поместить в модальный div, выглядят так
<div id="dialog"></div>
<a class="modal" href="/privacy.html">privacy policy</a>
Вещи, которые я пробовал
- Различные версии jQuery и пользовательского интерфейса jQuery.
- Удаление всего кода, кроме event.preventDefault(); -- это должно предотвратить даже загрузку ссылки, но страница все еще загружается!
