How to create your own Jquery Modal

Basic modal need a simple and easy code, sometimes it’s more appropriate to create your own than a full featured modal or lightbox plugin. This are guide to have an Instant Modal or you can check out the result here »


<div id="question"><h1>Question???</h1></div>
<div class="contactdet">
<div class="contactformfooter">
<div id="close">Close</div>


#question {cursor:pointer;}
.contactdet{display:none; background:#aaa; width:100%; height:100%; 
position:fixed; top:0; z-index:99999;}
.contactformfooter {width:240px; height:240px; position:relative; margin:10% auto 0 auto; padding:20px; border:1px #000 solid; background:#fff;}
.contactformfooter p{padding-bottom:10px; line-height:20px; font-size:12px;}
#close {width:50px; height:50px; position:absolute; right:-25px; top:-25px; cursor:pointer; background:#333; color:#fff;}


jQuery( "#question" ).click(function() {

jQuery( "#close" ).click(function() {

Funky Blueman


Blue Man Group is a creative organization founded by Phil Stanton, Chris Wink and Matt Goldman. The organization produces theatrical shows and concerts featuring music, comedy and multimedia; recorded music and scores for film and television; television appearances for shows such as The Tonight Show, Scrubs, FETCH! with Ruff Ruffman, and Arrested Development; and a children’s museum exhibit (“Making Waves”). All of the organization’s appearances star a trio of performers called Blue Men.

I was inspired by the Vegas Blueman when I designed this template.

Download of Blue Man Materials and CSS Template.

Navigation Menu Resources

Now a days, everybody using dropdown, dropline, flyout, toggle and more navigation style menu. Menus come in many different variety and execution, some put together in a number of different ways, some done with javascript, some with ‘pure’ CSS and some a mixture of both. This are the list of My favorite Menu Style.

FreeStyle Menus v1.0 RC11 – FreeStyle Menus is a keyboard accessible menu with added javascript animated fading effects. It used javascript instead of :hover for controlling the submenus means that they are more usable and won’t disappear as easily when moving around the menus. I love this menu style. This menu style can easily to manipulate and cross browser compatible. I even created a sample CSS Template using FSMenu.

The Free Church Website is compose of Pure CSS and FS Menu. By the way I even used pure css round corner on this template.

Deluxe CSS Dropdowns and CSS Flyouts – this free CSS Menu, it used “sticky hovering zones” which ensure that the submenus stay open when moving between different level. This nav works in IE5, IE5.5, IE6, Op7, Gecko, Konqueror, and Safari. IEmac fails to support the hover method used, and so gets the expanded nav instead. IEwin with scripting disables also gets the expanded nav. Nav 4 does not support this method, or much else for that matter.

CSS PLAY MENU – Stu Nicholls has worked on numerous examples of his pure CSS menus. The main advantage of his CSS Menu, there are require no javascript to work in IE<=6 which means that these dropdowns and flyouts menu will always function when javascript is disabled. But the downside, the HTML makes use of IE conditional comments and table tags. The dropdowns are also not keyboard accessible.

Son of Suckerfish Dropdowns – of Patrick Griffiths and Dan Webb. Suckerfish dropdowns are widely used, due in part to their relatively easy implementation. There’s also a fix using an iframe and javascript to get this to work in IE when the dropdowns fall over select elements. But no animation effect and required javascript to enabled.

Listamatic – for Simple CSS List or First level CSS List a good start is the listmatic. They also have a webbase automatic list generator, the List-O-Matic.