devi.web.id

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

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

blog comments powered by Disqus