When using the overlay tool that is offered by jQuery Tools – an excellent JavaScript library that I highly recommend you add to your toolkit – you need to be aware that content that gets displayed within the overlay needs to be positioned within a DOM where it will not be affected by the styling applied to the elements around it.
For example, in a recent two column template I was working on, I was showing a series of YouTube videos using the overlay tool, but when I went to test it, the display was all messed up because the styles (specifically the positioning – i.e. position: relative) of the elements in proximity were conflicting with the overlay itself.
My workaround was to remove these overlay content elements and append them to the <body> tag – thereby avoiding any styling conflicts.
$(function(){
$("div.overlay").appendTo('body');
});
Thanks so much – been banging my head on and off for a week!
Thanks! I can stop working early today because of you.
Priceless piece of information. Thanks for that.
This tip saved me AGES! Thank you!
Thanks, you saved me some pain