I am testing Jquerytools, Loading external pages into overlay, from source: In my script it not works, i dont understand why...
Thanks for help.
Thanks for help.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<script src="[URL unfurl="true"]http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>[/URL]
<style>
<style>
#overlay {
background-image:url([URL unfurl="true"]http://jquerytools.org/media/img/overlay/transparent.png);[/URL]
color:#efefef;
height:450px;
}
div.contentWrap {
height:441px;
overflow-y:auto;
}
.apple_overlay {
display:none;
background-image:url([URL unfurl="true"]http://jquerytools.org/media/img/overlay/white.png);[/URL]
width:640px;
padding:35px;
font-size:11px;
}
.apple_overlay .close {
background-image:url([URL unfurl="true"]http://jquerytools.org/media/img/overlay/close.png);[/URL]
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}
</style>
</head>
<body>
<a href="[URL unfurl="true"]http://jquerytools.org/demos/overlay/external-content2.htm"[/URL] rel="#overlay" style="text-decoration:none">
<button type="button">Show external page in overlay</button>
</a>
<a href="[URL unfurl="true"]http://some.com"[/URL] rel="#overlay" style="text-decoration:none">
<button type="button">Show another page</button>
</a>
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>
<script>
$(function() {
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
</body>
</html>