Monday, 16 March 2015

Uglipop.js – Ultra Lightweight Javascript Modal/Lightbox

(Pure Javascript)

An ultra lightweight,unstyled 2kb Minimal Javascript. Is Lightweight Non-fancy Modal Written is JS , Uglipop is highly customizable

Let’s see it in action.

Check Out Demo

In Raw form Uglipop does not contain modal like this it is actually unstyled , in order to full fill its aim of being fully customizable , minimal and lightweight. That’s the reason behind calling it Ugly Things That can be used with Uglipop

You Can Use Div.
You Can use Plain HTML
You Can use AJAX Response
You Can use Iframe
You Can use Images

You Can always use Uglipop with minimal code like this

uglipop({class:'put', //styling class for Modal
        source:'html',
        content:'<div> All HTML goes here </div>'});}

How does it look when it’s Ugly & raw?

Well UgliPop at its worst looks really bad but the good part is that you can style it way the way you want it

uglipop({class:'put2', //styling class for Modal
        source:'html',
        content:'<h1>This is some Raw Content</h1>'});}

.put2{
      background-color:#fff;
    }

How do I style my Uglipop Modal ?

Well Styling an Uglipop Modal is pretty simple and easy while calling uglipop(); watchout for argumentclass:”Your Styling Class Name Goes Here” so your code becomes something like this.

uglipop({class:'my-styling-class', //styling class for Modal
        source:'html',
        content:'<h1>This is some Raw Content</h1>'});}

.my-styling-class{
      background-color:#fff;
      color:black;
      /*all CSS goes here*/
    }

How Do I use Other Div inside Uglipop Modal ?

Using Other Div inside Uglipop Modal is Pretty Simple , minimum possible code can go like this

uglipop({class:'my-styling-class', //styling class for Modal
        source:'div', //'div' instead of 'html'
        content:'your div id goes here'});}

<div id='some-div-id' style='display:none;'>
        other html goes here .....
        </div>

Can We Use Images inside Uglipop Modal?

Sure you can always use the images inside the uglipop by using it in HTML mode

uglipop({source:'html',
        content:'<img src="url-goes-here"></img>'});}

How Do I Create Custome Themes for Uglipop?

uglipop({class:'put', //styling class for Modal
        source:'html',
        content:'<div> All HTML goes here </div>'});}

.put{
      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);
    }

Ads