Version 1.5Overlay Widget

Overview

The glow.widgets.Overlay widget places an element on top of other elements on the page.

This widget is extended internally by widgets (such as Panel) that appear on top of other elements. You should only need to create an overlay directly if the following widgets do not meet your requirements:

• Panel - A windowed dialog with a close button. Comes with a default style which can be altered or retemplated

Using the Overlay widget

Creating a basic Overlay

It is often desirable, for accessibility reasons, that the content for overlays come from an existing element on the page. When this method is used, the Overlay will hide the content on the page until it is shown.

HTML in the document:

<div id="helloOverlay">Hello everyone</div>

CSS:

#helloOverlay { background: #ccc; padding: 20px; }

JavaScript

//create overlay instance
var myOverlay = new glow.widgets.Overlay("#helloOverlay", {
  modal: true
});
//display overlay
myOverlay.show();

The first parameter of the constructor idetifies the content of the Overlay. This can be an array of nodes, a single node, a CSS selector (as supported by glow.dom.get) or a Glow NodeList.

By default the Overlay will appear in the center of the screen and be non-modal. When the Overlay is modal (such as the example above), clicking on the mask will hide the Overlay.

Under those circumstance where is not desirable that the content come from the page, then a NodeList of the content must be created.

var myOverlay = new glow.widgets.Overlay(
  glow.dom.create("<div id="helloOverlay">Hello everyone</div>"), {
    modal: true
  }
);
myOverlay.show();

Creating a custom Overlay

Most visual aspects of the Overlay can be controlled using CSS, aside from position which is adjusted at run-time but can be set using x & y options.

If your Overlay is modal, you can provide a Mask instance to use rather than the default.

HTML in the document:

<div id="customOverlay">This is my custom overlay</div>

CSS:

#customOverlay {
  background: #C9DCFF;
  border: 10px solid #808DA3;
  width: 300px;
  text-align: center;
  padding: 20px;
}

JavaScript

//create overlay instance
var myOverlay = new glow.widgets.Overlay("#customOverlay", {
  mask: new glow.widgets.Mask({color:"#343942"}),
  x: "90%",
  y: 20
});
//display overlay
myOverlay.show();

Positioning works in the same way as CSS background positioning. Number values are pixel values from the top-left of the window. With percent values, 0% places the left edge of the overlay against the left edge of the window, 100% places the right edge of the overlay against the right edge of the window. The default is 50%, which centers the overlay in the window.

Animating an overlay

You can specify an animation to run as an animation shows and hides. Two defaults are currently provided, "fade" and "roll".

//create overlay instance
var myOverlay = new glow.widgets.Overlay("#fadeOverlay", {
  modal: true,
  anim: "fade"
});
//display overlay
myOverlay.show();

//create overlay instance
var myOverlay = new glow.widgets.Overlay("#rollOverlay", {
  modal: true,
  anim: "roll"
});
//display overlay
myOverlay.show();

Creating a custom animation

Rather than using one of our defaults, you can create your own animation for your overlay.

You can pass a function to the anim option. This function will be called when the overlay is about to show or hide. The overlay will be passed as the first parameter, and true as the second parameter if the overlay is about to be shown, false if it's about to be hidden.

//generate animation
function createAnim(overlay, isShowing) {
  if (isShowing) {
    overlay.container.css("left", "-340px");
    return glow.anim.css(overlay.container, 1,
      {
        left: {from: "-340px", to: "20px"}
	  },
	  {tween: glow.tweens.bounceOut()}
	);
  } else {
    return glow.anim.css(overlay.container, 0.5,
      {
        left: {to: "-340px"}
      },
      {tween: glow.tweens.easeIn()}
    );
  }
}

//create overlay instance
var myOverlay = new glow.widgets.Overlay("#customAnimOverlay", {
  modal: true,
  anim: createAnim,
  x: 20,
  y: 20
});
//display overlay
myOverlay.show();

Further information on animation can be found in the animation user docs.

Dyamically updating an Overlay & using events

When an Overlay is displayed its 'show' event is fired. You can listen for this event and update the content through the 'content' property, a Glow NodeList. If your 'show' callback returns false, the Overlay will not be shown.

HTML in the document:

<div id="countdownOverlay">You can open this overlay <span class="remainingCount"></span></div>
<p><a href="#countdownOverlay" id="showCountdownOverlay">Run example</a></p>

CSS:

#countdownOverlay { background: #ccc; padding: 20px; }

JavaScript

//start the countdown
var overlayShowCountdown = 5;

//create overlay instance
var myOverlay = new glow.widgets.Overlay("#countdownOverlay", {
  modal: true
});

//display overlay when show link is clicked
glow.events.addListener("#showCountdownOverlay", "click", function() {
  myOverlay.show();
  return false;
});

//update the overlay when it shows
glow.events.addListener(myOverlay, "show", function() {
  //decrement the counter, don't show the overlay if it's less than zero
  if (--overlayShowCountdown < 0) {
    alert("You've had enough overlay!");
    return false;
  }

  //set the text of the 'remainingCount' span.
  //inside the event listener, 'this' refers to the Overlay
  this.content.get("span.remainingCount").text(
    overlayShowCountdown +
    " more " +
    (overlayShowCountdown == 1 ? "time" : "times")
  );

});

For a complete listing of methods and properties, Refer to the API.