jquery – Greyed Out Background and Popup Window

To have a greyed out background, you only need to have a hidden parent window like section or div to hold our popup window (modal dialog).
Let’s get started. This is pretty basic tutorial. I’ll be using html5 on this.

This is the basic setup for our html5. Texts inside article.popup is only for testing.
Next is to add our styles.

Add this style before the end of head tag or create your own stylesheet file. This is only short css so I just added it inside our html.

Take a look at section.hidden and section article.popup, those are the most important styles on our css specially section article.popup where you need to put your advanced css styles.
Finally, our jQuery code.

The jQuery code is simple. Read the comment for its explanation.

Our complete code.