Menu
I've been looking for a simple solution for quite some time. I want a page (for example http://www.google.com) to be displayed in a JQuery UI Dialog window. The plan is to later add the URL dynamically so all links from my site will be displayed in said window.
I tried the following, but the dialog window is empty when clicking on the link.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
</head>
<body>
<a id="openwindow" href="http://www.google.com">Click me to test.</a>
</body>
</html>
I found a few examples, but none actually worked. I'd really appreciate some help.
Thanks in advance.
808
You don't need an iframe as has been suggested, but you should read the documentation on dialogs here.
Instead, you need to load the content on the .open property --
$( "#openwindow" ).dialog({
open: function(event, ui) {
$('#divInDialog').load('test.html', function() {
alert('Load was performed.');
});
}
});
Also, you seem to use .each with an id -- the id is supposed to be unique within the page. use class instead.
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
