There are several JavaScript libraries that can help you to create an overlay effect, a good one should be JQuery tools.
A common issue with this library is that the auto load feature allow you to load only once the overlay, second time you try to load it nothing happens and no errors appear.
To solve this issue you can disable the auto load feature in the configuration and manually handle the closure of the overaly binding and unbinding the click event to the document object using jQuery.
A common issue with this library is that the auto load feature allow you to load only once the overlay, second time you try to load it nothing happens and no errors appear.
To solve this issue you can disable the auto load feature in the configuration and manually handle the closure of the overaly binding and unbinding the click event to the document object using jQuery.
var currentOverlay;
function openOverlay(){
var config = {};
config['mask'] = {
// you might also consider a "transparent" color for the mask
color: '#000000',
// load mask a little faster
loadSpeed: 300,
// very transparent
opacity: .6
};
config['closeOnClick'] = false;
config['load'] = false;
config['top'] = '40%';
config['onLoad'] = activateCloseHandler;
config['onClose'] = removeCloseHandler;
$("#theDivYouWantToOpenInOverlay").overlay(config);
currentOverlay = $("#theDivYouWantToOpenInOverlay").data("overlay").load();
}
function activateCloseHandler(event){
$(document).click(function(e) {
e.stopPropagation();
currentOverlay.close();
});
}
function removeCloseHandler(event){
$(document).unbind('click');
}