[英]JQuery ui modal dialog external ui
I am trying to load another page in a jquery ui modal 我正在尝试在jQuery UI模态中加载另一个页面
This is my Js File 这是我的Js文件
function eventWindow(url) {
getElementById("eventviewer").style.display="block";
$("#eventviewer").load(url).dialog({
modal:true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
}
this the markup 这是标记
<!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>
when i use window.open it works and opens in separate window. 当我使用window.open时,它可以在单独的窗口中打开。
But i am not able to open it in a jquery ui modal dialog. 但是我无法在jQuery UI模态对话框中打开它。
There are multiple ways you can do this but I am not sure which one is the best practice. 您可以通过多种方式执行此操作,但是我不确定哪种方法是最佳做法。 You can append an iFrame in the dialog container like this:
您可以将iFrame附加在对话框容器中,如下所示:
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
OR: 要么:
$(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");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.