Overlays with different styles

Styling your overlays is easy. Everything can be done with CSS. The thing that affects the look and feel most is the backgroundImage property which defines the growing image. Click on these buttons to open different kinds of overlays:

Here is my overlay

Sit amet felis non sem eleifend rhoncus. Mauris imperdiet consequat neque, ac molestie eros venenatis pharetra. In et leo nulla. Vivamus feugiat consequat augue nec vulputate. Vestibulum a ipsum et turpis viverra accumsan.

Cras sit amet est purus, a consectetur augue. Ut scelerisque consequat dictum. Donec in nulla risus. Nulla metus elit, tempus vel fermentum sed, dictum eu justo. Etiam et nulla ligula. Integer in tincidunt tellus. Cras cursus, lectus id tincidunt tincidunt, eros arcu cursus velit, a euismod justo lectus non quam. Ut euismod erat eu elit hendrerit.

Nulla vitae tellus justo. Donec condimentum lorem ac enim blandit id lobortis felis pellentesque. Mauris nulla velit, ultrices vel tempor vitae, sollicitudin vitae ligula. Vestibulum nec ullamcorper turpis. Aliquam aliquam aliquam pharetra.

Here is my overlay

standalone demo

The setup

The setup is identical to the minimal setup, but this time we have multiple buttons and multiple overlays. Each overlay is initialized with this single JavaScript call:

<!-- overlay triggers. overlay is referenced in the 'rel' attribute -->
<p>
  <button rel="#petrol" type="button">petrol</button>
  <button rel="#custom" type="button">custom</button>
  <button rel="#custom2" type="button">custom <em>2</em></button>
  <button rel="#apple" type="button">apple</button>
</p>
 
<!-- each overlay is initialized with this single JavaScript call -->
<script>
  $(function() {
    $("button[rel]").overlay({mask: '#000', effect: 'apple'});
  });
</script>

HTML

Overlays

Each of our overlays has a class overlay which defines a common style for each overlay. This common style is taken from this stylesheet. Each overlay has a unique id attribute which allows them to be customized separately.

<!-- first overlay with id "petrol" -->
<div class="overlay" id="petrol">
  .. content ..
</div>
 
<!-- second overlay with id "custom" -->
<div class="overlay" id="custom">
  ...
</div>
 
<!-- third overlay, background image can, of course, be defined with
     the style attribute -->
<div class="overlay" id="custom2"
     style="background-image:url(/media/img/overlay/flowplayer.png)">
</div>
 
<!-- rest of the overlays ... -->

HTML

CSS coding

CSS coding consists of overriding the settings of the default style. This includes customizing the background image and dimensions. Of course, you can use any CSS setting you wish. CSS is a powerful language.

#custom {
    background-image:url(/media/img/global/commerce/box-512.png);
    width:512px;
    height:531px;
    padding:0px;
}
#custom div.close {
    right:-15px;
    top:-10px;
}
#petrol {
    background-image:url(/media/img/overlay/petrol.png);
    color:#fff;
}
#apple {
    background-image:url(/media/img/overlay/apple.png);
    color:#fff;
    padding:50px 70px;
}

CSS

Note: this tool takes care that the background images are automatically loaded into the browser's cache so that user will see a smooth behaviour although the background image is very big. You can disable this preloading effect from the configuration.