Please check out the configuration tutorial and documentation too.
Open the overlay and scroll the page. Please
$("#overlay-modal").overlay({
trigger: "#trigger-modal",
closeOnEsc: false,
closeOnMaskClick: false
});
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
// 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">☓</a>');
$.ajax({
url: "ajax-content.html",
success: function (resp) {
overlayWrp.append(resp);
}
});
}
});
Please check out the documentation of Morpheus for animation information. The animationIn and animationOut objects are passed directly into Morpheus.