This is a message.

Multiple overlays on the same page

The following buttons will open multiple overlays side-by-side so that all overlays can be visible together:

Overlay #1

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 #2

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 #3

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 #4

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.

standalone demo

HTML code

Here are our trigger buttons. Each one references the correct overlay with the jQuery selector for the rel attribute: 

<!-- overlay buttons -->
<p>
  <button rel="div.overlay:eq(0)" type="button">first</button>
  <button rel="div.overlay:eq(1)" type="button">second</button>
  <button rel="div.overlay:eq(2)" type="button">third</button>
  <button rel="div.overlay:eq(3)" type="button">fourth</button>
</p>

HTML

We have four identical overlay elements on the page. Each one is similar to the one found in the minimal setup.

JavaScript code

Our JavaScript code initializes each overlay so that the finish configuration property is different for each overlay: 

$(function() {
    // positions for each overlay
    var positions = [
        [0, 530],
        [400, 20],
        [400, 530],
        [0, 20]
    ];
 
    // setup triggers
    $("button[rel]").each(function(i) {
 
        $(this).overlay({
 
            // common configuration for each overlay
            oneInstance: false,
            closeOnClick: false,
 
            // setup custom finish position
            top: positions[i][0],
            left: positions[i][1],
 
            // use apple effect
            effect: 'apple'
 
        });
    });
});

JavaScript

Opening and closing all at once

Try these buttons to open and close all overlays at once.

The idea is to get the handle to each overlay's API and call its open and close methods. Here are our functions: 

// open all overlays
function openAll() {
  $("button[rel]").each(function() {
    $(this).overlay().load();
  });
}
 
// close all overlays
function closeAll() {
  $("button[rel]").each(function() {
    $(this).overlay().close();
  });
}

JavaScript

Note: the openAll method could have alternately been written like this $("button[rel]").click() which would programmatically click all triggers revealing all overlays simultaneously.