代码之家 › 专栏 › 技术社区 › rws907

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

jquery-ui-dialog modal-dialog jquery

rws907 · 技术社区 · 12 年前

我试图将一个页面加载到模态DIV中,但似乎缺少了一些东西(可能很明显!)。这是我所拥有的。

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

在我的 <head> 部分

<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>

我的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 UI的不同版本
正在删除除event.prpreventDefault()之外的所有代码;--这应该可以防止链接加载,但页面仍然加载!

2 回复 | 直到 12 年前

fxtrade 12 年前

尝试使用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");
});

PS:这适用于类模态的任何链接。

mcarlson 12 年前

首先在您的中添加一些CSS以使模式框看起来正确:

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

然后,稍微修改load_modal.js文件:

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