Opening overlays programmatically

Sometimes you want to open dialogs or info boxes for your users directly from your JavaScript code. In this case, you don't need any trigger element and the setup is slightly different. This page loads the overlay upon page load but you can also do it from your JavaScript anytime you like.

Facebox

This dialog is opened programmatically when the page loads. There is no need for a trigger element.

To close, click the Close button or hit the ESC key.

standalone demo

JavaScript coding

This time our installation is different from the earlier examples. We select the overlay element in the jQuery selector and not the trigger element. And then we simply enable the load configuration variable.

  // select the overlay element - and "make it an overlay"
  $("#facebox").overlay({
 
    // custom top position
    top: 260,
 
    // some mask tweaks suitable for facebox-looking dialogs
    mask: {
 
    // you might also consider a "transparent" color for the mask
    color: '#fff',
 
    // load mask a little faster
    loadSpeed: 200,
 
    // very transparent
    opacity: 0.5
    },
 
    // disable this for modal dialog-type of overlays
    closeOnClick: false,
 
    // load it immediately after the construction
    load: true
 
    });

JavaScript

Note: if you are want to use the apple effect upon page load you should look at the apple effect documentation for more information about this.

Facebook look and feel

If you are interested in the Facebook look and feel the trick is to use a RGBA color on the border. Here is the CSS we are using:

  #facebox {
 
    /* overlay is hidden before loading */
    display:none;
 
    /* standard decorations */
    width:400px;
    border:10px solid #666;
 
    /* for modern browsers use semi-transparent color on the border. nice! */
    border:10px solid rgba(82, 82, 82, 0.698);
 
    /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
  }
 
  #facebox div {
    padding:10px;
    border:1px solid #3B5998;
    background-color:#fff;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif
  }
 
  #facebox h2 {
    margin:-11px;
    margin-bottom:0px;
    color:#fff;
    background-color:#6D84B4;
    padding:5px 10px;
    border:1px solid #3B5998;
    font-size:20px;
  }

CSS