Lightweight Customizable Modal & Lightbox JS Library – Uglipop.js

Preview:

Description:

Uglipop.js is a pure JavaScript library that makes it easier to display highly customizable modal popups on your webpage/web application.

It supports embedding any Html contents such as DIVs, iFrames, Images, Ajax content, plain Html, etc.

Without any external resources and you can use simple CSS class to style the Uglipop Modal according to your need.

Basic usage:

Download and include the Uglipop.js in your document.

<script src="uglipop.js"></script>

Create the modal content that is hidden on page load.

<div id="modalDemo" style="display:none;">
  <h2>Modal Title</h2>
  <hr>
  <p>Modal Content Goes Here</p>
  <p>You can use simple CSS class to style the Uglipop Modal according to your need. </p>
</div>

Create a button to trigger the modal.

<button onclick='modalTrigger();'>Click me</button>

Style the modal window whatever you like.

.modalWrapper {
  border-radius: 10px;
  background-color: white;
  width: 300px;
  height: 300px;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
}

Enable the modal window & trigger button.

var modalTrigger = function(){
    uglipop({
      class:'modalWrapper',
      source:'div',
      content:'modalDemo'
    })
;}

All the parameters.

uglipop({
  // styling class for Modal
  class:'modalWrapper',
  // source type. 'div' or 'html'
  source:'div',
  // class name for 'div'
  // html markup for 'html'
  content:'modalDemo'
  
})

Changelog:

11/22/2015

• Use keydown instead of keypress