uglipop

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

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

```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

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

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

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) Fixed By Corey Jepperson(@acoreyj)