I used the following example to display a website in an iframe on my website. I use the following code:
$(document).ready(function() {
$('a#verd').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
autoOpen: true,
width: 800,
height: 500,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(800 - horizontalPadding).height(500 - verticalPadding);
});
....
});
….it is exactly the same code as in the example but it does not work for me. however the click event is triggerd, I tested it with alert. Any ideas whats wrong?
EDIT:
my site structure
<html><head>
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/frontend.js"></script>
<script type="text/javascript" src="/js/jquery.corner.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('a#beginning').click(function() { $.post('/programme/list/page/1', {"format":"json"}, function(data, textStatus) { displayProgramms(data); }, 'html');return false; });
$('a#end').click(function() { $.post('/programme/list/page/11', {"format":"json"}, function(data, textStatus) { displayProgramms(data); }, 'html');return false; });
});
//-->
</script></head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
</div>
<div id="navholder">
...
</div>
<div id="contentwrapper" class="frontpage">
....
</div>
<div id="sidewrapper">
...
</div>
<div id="footerwrapper">
...
</div>
<div id="disclaimer">
...
</div>
</div>
</body></html>
the js code is located in frontend.js
works fine for me. Make sure you have a link with and id of “verd” in your html also make sure you have jquery ui loaded ?
EDIT
from your html looks like your missing jquery ui