Question

我正在尝试在jquery ui modal中加载另一个页面

这是我的Js档案

function eventWindow(url) {
    getElementById("eventviewer").style.display="block";
    $("#eventviewer").load(url).dialog({
      modal:true,
      buttons: {
        Ok: function() {
          $(this).dialog("close");
        }
      }
    });
}

这个标记

    <!doctype html>
        <html>
        <head>
        <title><?php echo "Date:".$firstDayArray['month']." ".$firstDayArray['year'];?>
        </title>
        <link href="../css/main.css" rel="stylesheet" type="text/css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
        <script src="event.js" type="text/javascript"></script>
        </head>
        <body>
        .....
    <?php
        echo "<td class=\"days\"><a href=\"javascript:eventWindow('events.php?m=".$month."&d=".$dayArray["mday"]."&y=$year');\">".$dayArray["mday"]."</a><br/>".$event_title."</td>\n";
    ?>
<div id="eventviewer"></div>
        ......
        </body
        </html>

当我使用window.open时，它可以工作并在单独的窗口中打开。

但是我无法在jquery ui模式对话框中打开它。

Answer 1

有多种方法可以做到这一点，但我不确定哪一种是最好的做法。您可以在对话框容器中附加iFrame，如下所示：

$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});

或

<强> Working Fiddle

$(function () { var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></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", ""); } }); $(".thumb a").on("click", function (e) { e.preventDefault(); var src = $(this).attr("href"); var title = $(this).attr("data-title"); var width = $(this).attr("data-width"); var height = $(this).attr("data-height"); iframe.attr({ width: +width, height: +height, src: src }); dialog.dialog("option", "title", title).dialog("open"); }); });

JQuery ui模式对话框外部ui

1 个答案: