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

```js uglipop({class:'put', //styling class for Modal source:'html', content:'

All HTML goes here

'});} ```

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

```js uglipop({class:'put2', //styling class for Modal source:'html', content:'

This is some Raw Content

'});} ``` ```css .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 ```js uglipop({class:'my-styling-class', //styling class for Modal source:'div', //'div' instead of 'html' content:'your div id goes here'});} ``` ```html

other html goes here .....

```

Can We Use Images inside Uglipop Modal?

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

```js uglipop({source:'html', content:'

'});} ```

How Do I Create Custome Themes for Uglipop?

```js uglipop({class:'put', //styling class for Modal source:'html', content:'

All HTML goes here

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

Bug Fixes

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