An Ultra Lightweight 2kb Minimal JS Modal/lightbox.MIT Lisence
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 UglipopYou 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>'});}
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;
}
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*/
}
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>
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>'});}
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);
}