Wrapper for showing custom fancybox popup

customFancybox.js

/**
 * Wrapper for showing custom fancybox popup
 * Parametrs: (header,content,buttonText,settings)
 *    header     - popup header text
 *    content    - popup content html
 *    buttonText - name of popup bottom button, set '' or not set for remove button
 *    settings:
 *     - style: popup css modificator for style, 'default' by default
 *     - event: popup css modificator for set popup identification, 'default' by default
 *     - hasCloseButton: TRUE by default, set FALSE for hidding close button
 *     - pause: delay before popup show, 100ms by default
 *     - element: css identificator for bind popup showing on click. If absent - popup will show immediatly
 *     - buttonOnClick: js code for execute on click bottom button
 *     - buttonLink: link to process on click bottom button
 * 
 * @function customFancybox
 * @requires fancybox2 {@link http://fancyapps.com/fancybox/}
*/
function customFancybox(header,content,buttonText,settings) {
  if (header !== '') {
    content = '<h3>'+ header +'</h3>' + content;
  }
  if (typeof buttonText === 'undefined') {
    buttonText = 'Ok';
  }
  if (typeof settings === 'undefined') {
    settings = {};
  }
  settings.hasCloseButton = (typeof settings.hasCloseButton === 'undefined') ? true : false;  
  settings.closeButtonMod = (settings.hasCloseButton == 'true') ? '' : 'hidden';
  settings.style          = (typeof settings.style   === 'undefined') ? 'default' : settings.style;
  settings.event          = (typeof settings.event   === 'undefined') ? 'default' : settings.event;
  settings.pause          = (typeof settings.pause   === 'undefined') ? 100 : settings.pause;
  settings.element        = (typeof settings.element === 'undefined' || settings.element === '') ? jQuery : jQuery(settings.element);
  settings.buttonOnClick  = (typeof settings.buttonOnClick === 'undefined') ? '$.fancybox.close()' : settings.buttonOnClick;
  
  var tpl     = {
     wrap     : '<div class="fancybox-wrap -style_'+settings.style+' -event_'+settings.event+'" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div><a class="b-button -type_popup -style_'+settings.style+'" href="'+settings.buttonLink+'" onclick="event.preventDefault();'+settings.buttonOnClick+'">'+buttonText+'</a></div></div>',
     closeBtn : '<a title="Close" class="fancybox-item fancybox-close '+settings.closeButtonMod+'" href="javascript:;"></a>'
  };
  
  setTimeout(function(){
    settings.element.fancybox({
      tpl        : tpl,    
      content    : content,
      beforeShow : function() {        
        // Add modificators to parent fancybox block. Need it besause fancybox settings didn't allow apply styles to fancybox-overlay.
        $('.fancybox-overlay').addClass('-style_'+settings.style+' -event_'+settings.event);
      }      
    });
  }, settings.pause);
}


/**
* @section Fancybox
* Custom fancybox styles
*/

.fancybox-overlay {
  &.-style_default {
    background: none;  
  }
}
  
.-style_default {
  .fancybox-close {
    top: 0;
    right: 54px;
    width: 72px;
    height: 72px;
    background: url('../images/blocks/l-popup/popup__close.png') 50% 50% no-repeat;
    background-size: auto;
  }  
  .fancybox-skin {
    background: url('../images/blocks/l-popup/popup-bg.png') 50% 0 no-repeat;
    background-size: 100% 100%;
    padding: 30px 120px !important;
  }  
  .fancybox-outer {
    padding: 20px 0 60px;   
  }    
  .fancybox-inner {
    max-height: 438px;
    max-width: 1114px-90*2;

    font: 700 21px/1.5 $font_OpenSans;
    color: #736737;
    text-align: center; 
  }  
  h3 {
    margin-bottom: 16px;
    padding-bottom: 55px;
    background: url('../images/blocks/l-popup/popup__title-bg.png') 50% 100% no-repeat;
    font-size: 30px;
    font-family: $font_Roboto;
    color: #80754d;
    text-transform: none;
    text-align: center;
  }  
}
.-style_gamehint {
  @extend .-style_default;
}

/* 
* Usage example
*/
customFancybox(
  'Game help (intro)',
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  'Ok!', {
  style: 'gamehint'
  }
);