Simple modal
Using sModal
In the header of your HTML page, insert this snipt

To create modals, just add a link div with another div with the class "content".

A simple modal window with only css and a little jQuery to launch everything.

How it's done
(The best way to see how it's done is to check the source)

CSS part:
The divs are positioned in a fixed manor, so that they will show up overlaying all the content. The dark mask layer's opacity is set to 70%, so that it gives a nice focus to the content.

JQuery part:
JQuery is used to toggle the visibility. JQuery adds the fade in effect also.

The snipets might not be up-to-date, but they give you the general idea. Just check the source if you want to know the exact code for this look.
Easy embedding!
Works with hyperlinks by just adding a rel attribute.
Resize your modals!
You can now resize your modals by configuring "sheight" and "swidth" in your sModal.
Smodal's structure is simple.
All the modal windows are written inside your <body> tag. All the modals are inside one place, which can be seen in this snippet:

This way you can place your modals at the bottom of your html and keep your code clean.

Opening Modals
The modals can be easily referenced to:
1) Create a div with the id of enter.
2) Add name to div.
3) Create modal with id = name of link div
Download latest version from

Download latest version from