Uglipop.js

Website

(Pure Javascript)

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

Checkout Documentation

[Documentation Here](http://flouthoc.github.io/uglipop.js/)

Let’s see it in action.

[Check Out Demo](http://flouthoc.github.io/uglipop.js/)

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

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

How Do I add my modification or plugin to this repo?

There is a plugin directory you can add your module like this plugin/your-module/your-files with author and module detailed info

Bug Fixes

[Browser prefixes on transform style (to fix positioning issues with Safari, Chromium, IE, etc) ](#2) Fixed By [Corey Jepperson(@acoreyj)](https://github.com/acoreyj)