jQueryUI将页面加载到DIV和模态对话框中

我试图将一个页面加载到一个模态DIV中，但似乎遗漏了一些东西（可能是显而易见的！）。这是我的

问题 页面不会加载到div中，而是直接点击链接进入页面

在我的

部分

<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/load_modal.js"></script>

我想把链接放到modal div中，看起来像这样

<div id="dialog"></div>
<a class="modal" href="/privacy.html">privacy policy</a>

我尝试过的事情

• jQuery和jQuery UI的不同版本
• 正在删除除event.preventDefault（）之外的所有代码；--这将使链接不会均匀加载，但页面仍会加载

  ---

尝试使用jQuery UI在iframe中加载页面：

$(".modal").on("click", function (event) {
    event.preventDefault();
    //console.log('click'); TO CHECK IF CLICK IS DETECTED
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" width="600" height="400"></iframe>');
    var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: "auto",
    height: "auto",
    close: function () {
        iframe.attr("src", "");
        }
});
    var src = $(this).attr("href");
    iframe.attr({
        src: src
    });
    dialog.dialog("option", "title", "Your Title...").dialog("open");
});

$（.modal”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
//console.log（'click'）；检查是否检测到单击
变量iframe=$（''）；
var dialog=$（“”）.append（iframe.appendTo（“正文”）.dialog({
自动打开：错误，
莫代尔：是的，
可调整大小：false，
宽度：“自动”，
高度：“自动”，
关闭：函数（）{
iframe.attr（“src”，即“）；
}
});
var src=$（this.attr（“href”）；
iframe.attr({
src:src
});
对话框（“选项”、“标题”、“您的标题…”）。对话框（“打开”）；
});

---

PS：这适用于与类modal的任何链接。

首先在您的中添加一些CSS，使modal框看起来正确：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

---

我已经有了一个定制的jQuery UI css文件链接。请参阅更新到原始帖子。在文档中包装整个函数。ready（）没有执行任何操作。链接仍然只是打开页面，就好像jQuery没有被处理一样。在最初的load_modal.js中，有4个“{”括号。你可以在上半部分将它们全部关闭。下半部分有2个“{”括号，但有3个“}”。这会立即出现在我的Safari web检查器中。在我的解决方案中，我用document.ready（）包装这两个函数。我想你的问题可能与这些括号有关。我没有抓住我的原始文件中的括号。谢谢。我用你的脚本替换了我的整个load_modal.js，它仍然显示相同的行为。如果你的链接没有实际加载load_modal.js文件，也会出现症状。你确认它在/js/directo中了吗ry？如果它在子文件夹中，您可能需要使用src=“js/load_modal.js”（删除/js/load_modal.js之前的前导斜杠）。它加载了它。我可以查看源代码并单击指向它的路径，它就打开了。与上面相同。这就像jQuery甚至没有加载，但我确实将它作为第一个通过谷歌托管URL加载的库。这个脚本在我拥有的几个网站上运行良好…如果你放上“console.log（'click'）；”，你看到日志中的点击了吗？如果没有，jquery没有加载…日志中没有显示任何内容。我不明白为什么jquery没有加载。这是我头部部分链接的第一个脚本，我已经通过查看源代码并单击指向Google托管实例的URL验证了它加载了库。那么我缺少了什么？好的，我已经完成了我构建了一个只包含jquery、jqueryui和我的自定义css的框架页面。执行此操作并将脚本包装到文档中。就绪语句有效。因此，现在我必须找出我的页面上某处是否存在处理顺序错误…对吗？找到了问题。显然，我的另一个脚本有语法错误。再次感谢您的帮助!

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

$(document).ready(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();
    });
  });
});