Fork me on GitHub

Uglipop.js

Pure Javascript

An Ultra Lightweight 2kb Minimal JS Modal/lightbox.MIT Lisence



View the Project on GitHub

Let’s see it in action.



You'll Get To Know about this uglipop theme at the end of this documentation

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 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>'});}

The "put2"'s CSS the styling content goes like this

.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 argument class:"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>'});}

The "my-styling-class"'s CSS the styling content goes like this

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

Now Create Div with Id given in content

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

You Can Style the Div way you want it.

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>'});}

Styling goes something like this

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

How To Contribute?

  1. By Creating Themes for Uglipop Modal
  2. Uglipop was built in a very fast and untidy manner , so you can always fix bugs and optimize code
  3. Crate Issues
  4. Spread The Word
  5. Fork it,create Pulls