Local content

Let's say we need LexyBox to display local content as a classic modal window.

Open local content

HTML

// Add link with anchor pointed to content
<a href="#content" class="lightbox">Open local content</a>

// Create content in hidden div
<div id="content" style="display:none;">
  <p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
</div>

JS

// Init new LexyBox
var lexybox = new LexyBox('.lightbox', {

  // Light theme is a bit better for this
  theme: 'light'

});

// Add new service
lexybox.add_service('local_content', {

  // Set template
  html: '<div class="content"><div class="content__inset">%html</div></div>',

  // Set finder
  finder: function(url, link) {
    return document.getElementById(url.substr(1)) !== null;
  },

  // Set parser
  parser: function(url, link) {
    return {html: document.getElementById(url.substr(1)).innerHTML};
  }

});

CSS

.content {
  max-height: 100%;
  overflow-y: auto;
  font-size: 18px;
}
.content__inset {
  max-width: 740px;
  margin: 0 auto;
  padding: 4% 6%;
}