Easy lightbox

easy-lightbox.js

/*
Accompanying CSS is commented below.

Example Usage:
  show_lightbox("Hello World", "Good morning, friend", {ok_button: true});

---

show_lightbox( title, content, [options] )
  Title: The title of the lightbox. Optional. If only title is specified, the title will be used as content instead.
  Content: HTML content displayed within the lightbox.
  Options: Object containing additional parameters 
  
  -- options parameters
  
    ok_button = false             -- Boolean, should OK button be displayed?
    ok_button_text = 'Ok'         -- Text used for the OK button (left-side button, primary)
    ok_button_callback = false    -- If provided, this function is triggered on click. To close the lightbox, use hide_lightbox(). Note: OK button does nothing by default.
    
    close_button = true           -- Boolean, should Close button be displayed?
    close_button_text = 'Close'   -- Text used for the Close button (right-side, secondary)
    close_button_callback = false -- If provided, this function is triggered on click. To close the lightbox, use hide_lightbox() Note: Close button will automatically close the lightbox unless a callback is provided.
    
    overlay_triggers_close = true -- Boolean, if true clicking the background overlay will trigger the same event as the close button.
    
    reset_lightbox = true         -- If set to true (default), the reset_lightbox() function is called before the lightbox is rendered.
    
  -- end of options
*/
function show_lightbox( title, content, options ) {
  if ( jQuery('#lightbox').length < 1 ) {
    jQuery('body').append( jQuery(
      '<div id="lightbox-overlay" style="display: none;"></div> \
      <div id="lightbox" style="display: none;"> \
        <div id="lightbox-title" style="display: none;"></div> \
        <div id="lightbox-content" style="display: none;"></div> \
        <div id="lightbox-controls"> \
          <a href="#" id="lightbox-ok" class="button" style="display: none;">Ok</a> \
          <span class="sep" style="display: none;">|</span> \
          <a href="#" id="lightbox-close" class="button alt" style="display: none;">Close</a> \
        </div> \
      </div>'
    ) );
  }
  
  if ( typeof title == 'undefined' ) title = false;
  if ( typeof content == 'undefined' && title ) { content = title; title = false; } // If only one argument,  use that argument as content rather than title
  if ( typeof content == 'undefined' || !content ) content = false;
  if ( typeof options == 'undefined' || !options ) options = {};
  
  var default_options = {
    ok_button: false,
    ok_button_text: 'Ok',
    ok_button_callback: false,
    close_button: true,
    close_button_text: 'Close',
    close_button_callback: false,
    overlay_triggers_close: true,
    reset_lightbox: true,
  };
  
  for( var index in default_options ) {
    if ( typeof options[index] == 'undefined' ) options[index] = default_options[index];
  }
  
  if ( options.reset_lightbox ) reset_lightbox();
  
  // Build the lightbox
  // Show title
  if ( title ) jQuery('#lightbox-title').html( title ).show();
  
  // Show content
  if ( content ) {
    // If content has no HTML tag, treat it as text, wrap inside <p>
    if ( /<[a-z][\s\S]*>/i.test( content ) )
      jQuery('#lightbox-content').html( content ).show(); // Contains HTML
    else
      jQuery('#lightbox-content').html( jQuery('<p></p>', { text: content }) ).show(); // Contains plain text, use <p> element
  }
  
  // Show OK button
  if ( options.ok_button ) {
    jQuery('#lightbox-ok').show().html(options.ok_button_text);
    
    if ( options.ok_button_callback )
      jQuery('#lightbox-ok').unbind('click').bind( 'click', options.ok_button_callback );
  }
  
  // Show OK / Close separator
  if ( options.ok_button && options.close_button ) {
    jQuery('#lightbox-controls .sep').show();
  }
  
  // Show Close button
  if ( options.close_button ) {
    jQuery('#lightbox-close').show().html(options.close_button_text);
    
    if ( options.close_button_callback )
      jQuery('#lightbox-close').unbind('click').bind( 'click', options.close_button_callback );
    else
      jQuery('#lightbox-close').bind('click', function(e) { hide_lightbox(); e.preventDefault(); return false; });
      
    if ( options.overlay_triggers_close )
      jQuery('#lightbox-overlay').css('cursor', 'pointer').unbind('click').click(function(e) { jQuery('#lightbox-close').trigger('click'); e.preventDefault(); return false; });
    else
      jQuery('#lightbox-overlay').css('cursor', 'default').unbind('click');
  }
  

  // Reset CSS
  jQuery('#lightbox').css({
    'margin-top': '',
    'margin-left': '',
  });
  
  jQuery('#lightbox').css({
    'margin-top': -1 * (jQuery('#lightbox').height() / 2),
    'margin-left': -1 * (jQuery('#lightbox').width() / 2),
  });
  
  jQuery('#lightbox, #lightbox-overlay').show();
}

function hide_lightbox( reset ) {
  if ( typeof reset == 'undefined' ) reset = true;
  
  jQuery('#lightbox, #lightbox-overlay').hide();
  
  if ( reset ) {
    reset_lightbox();
  }
}

function reset_lightbox() {
  jQuery('#lightbox-overlay').hide();
  jQuery('#lightbox').hide().css({
    'margin-top': '',
    'margin-left': '',
    'width': '',
    'height': '',
  });
  jQuery('#lightbox-title, #lightbox-content').text('');
  jQuery('#lightbox-ok').text('Ok').hide();
  jQuery('#lightbox-close').text('Close').hide();
  jQuery('#lightbox-controls .sep').hide();
}

/*

Lightbox CSS - You will want to change the "Lightbox Theme" section to match your theme.

##### Lightbox Core ######

#lightbox-title,
#lightbox-content,
#lightbox-ok,
#lightbox-close,
#lightbox-controls .sep {
  display: none;
}

#lightbox-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1500;
  
  width: 100%;
  height: 100%;
  
  cursor: pointer;
}
#lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1600;
  
  width: 420px;
  margin-left: -210px;
  
  cursor: auto;
}
#lightbox-content {
  margin: 8px 10px 16px;
  overflow: auto;
  max-height: 400px;
}
#lightbox-content > :last-child {
  margin-bottom: 0;
}
#lightbox-title {
  padding: 8px 10px 6px;
  
  font-size: 15px;  
  line-height: 18px;
  font-weight: bold;
  text-align: left;
}
#lightbox-controls {
  text-align: center;
}
#lightbox-ok,
#lightbox-close {
  display: inline-block;
  margin: 0 5px;
  padding: 10px 12px;
}
#lightbox-controls .sep {
  display: inline-block;
  width: 5px;
  
  font-size: 14px;
  text-align: center;
}



##### Lightbox Theme #####

#lightbox-overlay {
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}
#lightbox {
  color: #333;
  
  background: #fff;
  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.5);
  
  border: 10px solid #dfdfdf;
  border-radius: 0px;
}
#lightbox-controls {
  padding: 10px 0 0;
  background: #dfdfdf;
}
#lightbox-controls a.button {
  background: #5c5;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 #080;
}
#lightbox-controls a.button.alt {
  background: #c55;
  text-shadow: 0 -1px 0 #800;
}

*/