Overview

SimpleBox.js is a simple script (jquery module) used to overlay content on the current page. It's easy to setup and works on all modern browsers.

Requirements

SimpleBox require jQuery framework to work

How to use

1. Include all neccessary files

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/SimpleBox.js" type="text/javascript"></script>

2. Run simplebox

SimpleBox.open('jQuery Selector',(optional) {settings});

Settings

SimpleBox can be customized. Feel and look can be define by using (optional) settings property. Here is an explanation of each settings element.

• directInput - (default:false) which means that SimpleBox will grab a content from provided selectors. If set to true then instead of selectors raw data can be provided

   SimpleBox.open('<div>Hello World</div>',{
         directInput:true
   });

• bodyCss - (default:{'color':'#333','background':'#fff','padding':'10px','position':'relative','display':'block','clear':'both'}) is a jQuery css property allows to customize SimpleBox body(content) feel and look
• headCss - (default:{'position':'absolute','display':'block','background':'transparent','width':'100px','height':'40px','color':'#fff','top':'-30px'}) is a jQuery css property allows to customize SimpleBox head(caption and close button container) feel and look
• exitOnEsc - (default:true) is the ESC key listener.
• overlayBackground - (default:'#000') is a css value of background property which is use as a overlay background
• overlayOpacity - (default:0.75) float value from 0 to 1 used to set opacity level
• showCaption - (default:false) define if box caption should be displayed. Should be use with following
• captionText - provide a text to be used by box caption
• captionCss - jQuery css property - allows to define caption's feel and look (caption is positioned absolute to better customization then top,right is recommended to use in case of positioning)

   SimpleBox.open('#myContent',{
         showCaption:true,
         captionText:'My Caption',
         captionCss:{'font-size':12}
   });

• showCloseImage - (default:false) if set to true close image will be displayed. It should be use with 3 following settings
1. defaultCloseImageSrc - responsible for not active image source
2. hoverCloseImageSrc - responsible for active image source(if empty or not set only defaultCloseImageSrc will be used)
3. closeImageCss - its a css property allowed to custimzed close button apperance. should be specified as jQuery Css property (button is positioned absolute to better customization then top,right is recommended to use in case of positioning)

   SimpleBox.open('#myContent',{
         showCloseImage:true,
         defaultCloseImageSrc:'/images/closeButton_off.gif',
         hoverCloseImageSrc:'/images/closeButton_on.gif',
         closeImageCss:{top:3,right:4,border:"1px solid #fff"}
   });

• clone - (default:false) is used together with jQuery selector to grab a content. if set to true content will be cloned and copied into SimpleBox
• openingSpeed - (default:200) - specify opening transition
• closingSpeed - (default:200) - specify closing transition
• onOpen - (default:null) allows to provide custom callback function after SimpleBox is opened. Can be use with:
• onOpenParam - (default:null) gives ability to provide custom params into onOpen callback

   SimpleBox.open('#myContent',{
         onOpen:function(myParam){alert(myParam)},
         onOpenParam:'Hello World'
   });

• onClose - (default:null) allows to provide custom callback function after SimpleBox is closed. Can be use with:
• onCloseParam - (default:null) gives ability to provide custom params into onClose callback

   SimpleBox.open('#myContent',{
         onClose:function(myParam){alert(myParam)},
         onCloseParam:'Hello World'
   });

• bodyWebKitRoundCorners - (default:0) set body round corners with specified curve

   SimpleBox.open('#myContent',{
         bodyWebKitRoundCorners:10
   });

Methods

• open

   SimpleBox.open('<div>Hello World</div>',{
         directInput:true
   });

• close

   SimpleBox.close();

   SimpleBox.close(function(){alert('Hello World')});

   SimpleBox.close(function(user){
            alert('Bye '+user.name+' '+user.surname)
         },
         {name:'Marcin','surname':'R'}
   );

Real Usage Example

<script type="text/javascript">
$(document).ready(function(){
      $(".helper").each(function(){
            $('#'+$(this).attr('rel')).css({display:'none'});
      });
      $(".helper").click(function(){
            SimpleBox.open('#'+$(this).attr('rel'),{
               showCaption:true,
               captionText:$(this).attr('title'),
               captionCss:{'font-size':15},
               showCloseImage:true,
               defaultCloseImageSrc:'/images/closeButton_off.gif',
               hoverCloseImageSrc:'/images/closeButton_on.gif'
            });
      });
});
</script>