I am trying to load another page in a jquery ui modal
This is my Js File
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.
But i am not able to open it in a jquery ui modal dialog.
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:
$("#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");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.