Configuration Examples

Please check out the configuration tutorial and documentation too.

Do Not Show Mask

The Raid
The Raid
$("#overlay-maskoff").overlay({
    trigger: "#trigger-maskoff",
    showMask: false
});

Customize Mask

Undercover
Undercover
$("#overlay-mask").overlay({
    trigger: "#trigger-mask",
    mask: {
        opacity: 0.3,
        color: "magenta"
    }
});

Fixed Overlay

Open the overlay and scroll the page. Please

The Payment
The Payment
$("#overlay-fixed").overlay({
    trigger: "#trigger-fixed",
    position: "fixed"
});

Create Modal Window

Open modal overlay

Are you sure?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Yes No
$("#overlay-modal").overlay({
    trigger: "#trigger-modal",
    closeOnEsc: false,
    closeOnMaskClick: false
});

Load Content with AJAX

Create the overlay wrapper dynamically and load the content with AJAX. In this case I used Reqwest as an AJAX lib. You can check out the loaded content directly here: ajax-content.html

Open overlay with AJAX content
// in this case, you must define the width of the overlay with CSS
$('<div class="overlay-ajax"></div>').overlay({
    trigger: "#trigger-ajax",
    onBeforeOpen: function (o) {
        var overlayWrp = o.getOverlay();
        overlayWrp
            .empty()
            .append('<a class="close close-button">&#9747;</a>');

        $.ajax({
            url: "ajax-content.html",
            success: function (resp) {
                overlayWrp.append(resp);
            }
        });
    }
});

Custom Animations

Please check out the documentation of Morpheus for animation information. The animationIn and animationOut objects are passed directly into Morpheus.

The Price of Information
The Price of Information
$("#overlay-animation").overlay({
    trigger: "#trigger-animation",
    position: "fixed",

    startAnimationCss: {
        opacity: 0,
        top: 0
    },
    animationIn: {
        opacity: 1,
        top: 80,
        duration: 400
    },
    animationOut: {
        opacity: 0,
        top: -200,
        duration: 400
    }
});

Go back to the documentation