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