Simple Modal Plugin
Simple Modal is a lightweight jQuery plugin that gives you flexibility to build any ideas that you envision. Created by Eric Martin, it also gives you a powerful interface for modal dialog development.
Styling
#simplemodal-container a.modalCloseImg {
background:url(/img/x.png) no-repeat; /* adjust url as required */
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-15px;
right:-18px;
cursor:pointer;
}
For IE6 when applying PNG fix
<!--[if lt IE 7]> <style type='text/css'> #simplemodal-container a.modalCloseImg { background:none; right:-14px; width:22px; height:26px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='img/x.png', sizingMethod='scale' ); } </style> <![endif]-->
Callback
onOpen: for adding effects to opening of modal dialog elements
$("#element-id").modal({onOpen: function (dialog) { dialog.overlay.fadeIn('slow', function () { dialog.container.slideDown('slow', function () { dialog.data.fadeIn('slow'); }); }); }});
onShow: for binding events or any actions you might want to perform after modal dialog elements are displayed.
$("#element-id").modal({onShow: function (dialog) { // Access elements inside the dialog // Useful for binding events, initializing other plugins, etc.
// For example: $("a", dialog.data).click(function () { // do something
return false; }); }});
onClose: for adding effects to closing of modal dialog elements.
$("#element-id").modal({onClose: function (dialog) { dialog.data.fadeOut('slow', function () { dialog.container.slideUp('slow', function () { dialog.overlay.fadeOut('slow', function () { $.modal.close(); // must call this! }); }); }); }});
To learn more about Martin’s cool lightbox, kindly visit his site by clicking on the image.
0
511
