Mempercantik tampilan jqModal
September 27, 2010
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.
Bagi anda yang mengenal jQuery tentunya mengenal plugin yang satu ini.
Ini adalah kostumisasi tampilan jqModal yang sering saya gunakan:
jqModal.css
.jqmOverlay {background-color: #000;}
.jqmWindow {
position: fixed;
top: 17%;
left: 50%;
width: 300px; /* default width */
margin-left: -150px;/* width/2 */
display:none;
border:1px solid #aaa;
-moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
}
.jqmHeader {
height: 32px;
background: url(bg_header.gif) repeat-x;
}
.jqmTitle {
padding: 8px 0 0 8px;
color: #000;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.jqmContent {
padding: 10px;
background: #fff;
}
.jqmClose {
width: 28px;
height: 27px;
float: right;
margin: -21px 2px 0 0;
cursor: pointer;
background: url(close.gif) repeat-x;
}
/* IE6 */
html,body {margin:0;padding:0}
/* Background iframe styling for IE6. Prevents ActiveX bleed-through (select form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;}
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow{position: absolute;}
Demo: http://sandbox.devi.web.id/jqmodal
Download : http://devi.web.id/files/jqmodal.zip
