The solution is simple, but coming to it was quite the opposite. After browsing many posts which don't deal with the fact that external URL can't be loaded via AJAX (ruling out the $.load() method), I came up with this simple solution:
$('<iframe src="http://www.sitekickr.com/" width="300" height="300" />').dialog({ modal: true, width: 300, height: 300});
Creating an IFRAME on the fly prevents you from bloating your HTML, while allowing you to load external content.
Possible Issue
You may encounter an IFRAME that is "stuck" at a certain width, or doesn't fill the dialog completely. It seems that wrapping the IFRAME in a DIV resolves this issue.
$('<div><iframe src="http://www.sitekickr.com/" width="300" height="300" /></div>').dialog({ modal: true, width: 300, height: 300});
Awesome, thanks very much, reaaaally helped me. =]
THANKS A LOT!!!!!!!! just add a little code only!
For who out there looking for open dialog box with external link, here the code:
<html>
<head>
<title>DIALOG BOX EXTERNAL PAGE</title>
</head
<script type="text/javascript">
$(function(){
$('#dialog_link').click(function(){
$('<iframe src="http://www.sitekickr.com/" width="300" height="300" />').dialog({ modal: true, width: 300, height: 300});
return false;
});
</script>
<body>
<h2 class="demoHeaders">Cuba klik</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Klik kat sini la budak bijak</a></p>
</body>
</html>