Loading external pages into overlay

Loading external pages into overlay

I am testing Jquerytools, Loading external pages into overlay, from source: http://jquerytools.org/demos/overlay/external.html.
In my script it not works, i dont understand why...

Thanks for help.

  1. <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Tools standalone demo</title>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <style>
    <style>
    #overlay {
    background-image:url(http://jquerytools.org/media/img/overlay/transparent.png);
    color:#efefef;
    height:450px;
    }
    div.contentWrap {
    height:441px;
    overflow-y:auto;
    }
    .apple_overlay {
    display:none;
    background-image:url(http://jquerytools.org/media/img/overlay/white.png);
    width:640px;
    padding:35px;
    font-size:11px;
    }
    .apple_overlay .close {
    background-image:url(http://jquerytools.org/media/img/overlay/close.png);
    position:absolute; right:5px; top:5px;
    cursor:pointer;
    height:35px;
    width:35px;
    }
    </style>

    </head>
    <body>
    <a href="http://jquerytools.org/demos/overlay/external-content2.htm" rel="#overlay" style="text-decoration:none">
    <button type="button">Show external page in overlay</button>
    </a>

    <a href="http://some.com" 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>