A Sample Styled Modal This is a custom styled Modal,However Uglipop by default comes without style (in unstyled manner) you can customize the modal way you want it Uglipop Modal Can be associated to any CSS script you want it is highly customizable. Ok Got it !

Let’s see it in action.

Try it

You'll Get To Know about this uglipop theme at the end of this documentation

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

You Can Use Div .

. You Can use Plain HTML

You Can use AJAX Response

You Can use Iframe

You Can use Images

Things That can be used with

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

Try it!

uglipop({class:'put2', //styling class for Modal source:'html', content:'<h1>This is some Raw Content</h1>'});}

The "put2"'s CSS the styling content goes like this

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

The "my-styling-class"'s CSS the styling content goes like this

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

Now Create Div with Id given in content

<div id='some-div-id' style='display:none;'> other html goes here ..... </div>

You Can Style the Div way you want it.

Can We Use Images inside Uglipop Modal?

Try it

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?

Try it

uglipop({class:'put', //styling class for Modal source:'html', content:'<div> All HTML goes here </div>'});}

Styling goes something like this

.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 To Contribute?