Opening overlays programmatically
Overlay demo 4 / 8 : Opening overlays programmatically
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.
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.
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
});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;
}