The following button opens an overlay so that the surrounding page is gradually masked with a white semi-transparent mask making the overlay "exposed". This effect is achieved using our expose tool.
Here is my overlay
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lorem ligula, elementum vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
Overlay configuration
Because overlay is so commonly used together with the exposing effect, the dependency between these tools has been built in to the overlay tool and you can enable exposing simply by setting the expose property to true as follows:
// initialize overlay trigger
$("button:first").overlay({expose: '#6096D4'});The HTML code is similar to other examples. Show this demo as a standalone page.
Example: custom settings
This overlay example uses custom settings for the expose. It a little different looking / behaving mask and the overlay is using a red background. The expose configuration is not just a simple string, but rather an object with many configuration variables. Look at how the expose effect takes as long as one second to fade out:
Here is my overlay
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lorem ligula, elementum vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
Maecenas ac urna in libero mollis dignissim ut in urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet volutpat ante eu commodo. Donec sit amet leo libero, id adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi consectetur ultricies nibh, et cursus sem bibendum et.
Overlay configuration
$(function() {
$("button.overlaybutton").overlay({
// custom expose settings
expose: {
color: '#BAD0DB',
opacity: 0.7,
closeSpeed: 1000
}
});
});This overlay uses the following CSS file.
Example: alert box
Here is yet another overlay/expose example. This time we use quite a radical mask color. These kind of alert boxes should be shown only in very critical situations. It certainly will grab your users' attention!
Overlay configuration
This time we are not using the built-in exposing configuration and we want to take control of the exposing effect ourselves. The exposing is done upon the onBeforeLoad event and the onClose event is responsible for closing the expose effect.
$("#alert").overlay({
// center overlay finishing position vertically
finish: {top: 'center'},
expose: '#951756'
});