0

I can't get the overlay to show up nicely on my site, all I want is a simple lightbox with an iframe that pulls the href from the link its clicked on and displays it on top of an overlay. I have jQueryTools setup on my site so I thought I could use their overlay functionality. Here is my code:

 $(function(){
    $("body").append('<div class="oiOverlay" id="overlay"><div class="oiContentWrap"></div></div>');
    $("a[rel]").overlay({
        mask: '#000',
        closeOnClick: false,
        onBeforeLoad: function() {
            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".oiContentWrap");
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }
    });
});

CSS

#overlay { display: none; width:625px; z-index: 1000; min-height:200px; border:1px solid #000; }

HTML

<a href="http://www.google.com" rel="overlay">Google overlay</a>

What I am getting is a box that's aligned to the left instead of the center and no background/mask/overlay effect behind it. I can't figure out what I've missed, this is the page I followed when writing my code: http://jquerytools.org/demos/overlay/styling.html

UPDATE: I gave up on JQuerytools overlay and created my own

4

0 回答 0