jQuery Modal
With recent projects I needed a flexible modal box. Most of the ones out there are either horribly bloated or only work for images, which really sucks when you want a form inside one.
Easy answer, make my own... Here it is. By the way, the minimised version in under 2k with a tiny 1k stylesheet.
It works for images and other containing elements. Here are the examples:
Show on body load...
This is the really, really annoying type of modal box that loads as the page does. It also runs of this link.
Simple Image Modals
Click on an image to get a pop up bigger version of it.
This is about as simple as it gets; give the anchor tag a href for the bigger version of the image and it just works.
With the a tag having a title attribute this is then used by the modal pop up as the title of the big image.
Div Modal
Instead of clicking on an anchor tag, click on the div below and you get a modal box containing the same html.
Click Me
Using the rel Attribute
Click me and instead of an image you will get the content of a hidden div with a class or id that matches the rel.
You can put anything in me from full on forms to just a simple bit of text.
- An unordered list
Show & Hide Functions
Click me and you will get a modal box followed some javascript alerts on show, then on close.
Custom Close Links
Click me and you will get a bunch of text.
The extra close link inside the modal will also close the box. This done by simply giving it a class of 'sm_close' as the plugin looks for clicks on .smart_modal_close inside the overlay to close it.
More Close Links
Click me and you will get a bunch of text.
Within this text you will see another close link; this time it uses the show function to add a trigger to close the modal link.
Disabling the Overlay Click to close
Click me and you will get a tiny thumbnail of Fort Dunlop.
As with all modal boxes you get a blackened background known as an 'overlay', normally clicking on that will also close the modal. But not in this example! Now you can only click on the x (or any other element with class of 'modal_close') to close it.
If you take a look at the code you will notice that smart modal has totally changed; hopefully for the better.
For those of an adventurous nature there are now two new functions you can call manually - .smart_modal_hide() & .smart_modal_show(). Once you have instantiated the link using .smart_modal() you can call either of those to show or hide it.