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