Learn and share. The simplest harmony.

 

Create Elegant Modal Window Using CSS Scale Transform

Posted on April 8, 2012 and got 8 shouts so far

Modal Window has become one of most important items on developing website or web application. It is useful for showing additional information or simple pages such as login form, in order to avoid new window. In this post we’re going to use scale transform to make our modal window more elegant.

Scale Transform

The Modal Window we want to make will animate when showing. There are two animation we want to make, zoom in and zoom out. As we know CSS has property for scaling element using transform : scale(scale value), with this property and transition property we can create our zoom in and zoom out animation.

For zoom in, scale transform will have scale value from 1.2 for start to 1 for end. Zoom out will have from 0.7 to 1. This mean that scale value 1 is the original scaling of the element.

Creating Markup

Our Modal Window will wrapped by overlay element for distinguish its layer with main page. This overlay called overlay-container will have radial gradient from thick black transparent to thin.

Hello I'm zoom in modal window

I'm coming using scale transform, using transform: scale()
From scale(1.2) to scale(1) with transition property make me looks like come from you :)
Close Me
.overlay-container {
	display: none;
	content: " ";
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: radial-gradient(center, ellipse cover,  rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
}
	
.window-container {
	display: block;
	background: #fcfcfc;
	margin: 8em auto;
	width: 500px;
	padding: 10px 20px 20px;
	text-align: left;
	z-index: 3;
	border-radius: 3px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	transition: 0.4s ease-out;
	opacity: 0;
}
	
	.window-container h3 {
		margin: 1em 0 0.5em;
		font-family: "Oleo Script";
		font-weight: normal;
		font-size: 25px;
		text-align: center;
	}
	
	.close {
		margin: 1em auto;
		display: block;
		width: 52px;
		background: linear-gradient(top,  #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%); 
		border: 1px solid #aaa;
		padding: 5px 14px;
		color: #444;
		font-family: Helvetica, sans-serif;
		font-size: 12px;
		border-radius: 3px;
		box-shadow: 0 1px 3px #ddd;
		transition: 0.2s linear;
		cursor: pointer;
	}
	
		.close:hover {
		background: linear-gradient(top,  #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		border: 1px solid #aaa;
		}
	
		.close:active {
		background: linear-gradient(to bottom,  #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
		}

The Modal Window called window-container will have plain white background with smooth black shadow, while the close button we will use styling we have made before (Styling Form Elements Like Google Chrome’s Preferences). The Modal Window also has 0 opacity value for default and the transition 0.4 and ease-out value. If zoom in animation we set transform value to scale(1.2) while zoom out scale(0.7).

.zoomin {
	transform:  scale(1.2);
}
	
.zoomout {
	transform:  scale(0.7);
}
	
.window-container-visible {
	transform:  scale(1);
	opacity: 1;
}

There is also window-container-visible class we create before, this class will injected to window-container to push it to run zoom in or zoom out animation (see Creating “Next Level” Search Form Using jQuery & CSS3).

jQuery Help

Last thing to do is creating a fire an event for showing our Modal Window, using click event to the button we will show the overlay-container with fadeIn() and wait until 100ms to inject class window-container-visible to window-container element to run the animation. And the very last thing is add click event to close button for hiding Modal Window.

$('.button').click(function() {
	
	type = $(this).attr('data-type');
	
	$('.overlay-container').fadeIn(function() {
		
		window.setTimeout(function(){
		$('.window-container.'+type).addClass('window-container-visible');
		}, 100);
		
	});
});
	
$('.close').click(function() {
	$('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
});

Conclusion

Using scale transform we can enhance our simple modal window into more elegant but if you want to have more experimental result translate transform is also interesting. Enjoy!

 

This Post Tags :

Bookmark Post :

Pin It
  • Interesting! love it.
    On IE, transition doesn’t happen which is not a problem. However on IE8 and below, both modal windows open when you click on any of the triggers and both close with one click.

    • Both modal open beacause the opacity, they don’t support it. If you want to, add this after opacity: 0;

      -ms-filter:"progid:DXImageTransform
      .Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      
  • çok güzel hemen sitemde deneyeceğim. teşekkürler(thank you)

  • Show de bola!

  • excellent tips ! jquery rocks !

  • How do you bring about the model by link rather than by button?

    • simply add class name button and data-type attribute with value zoomin or zoomout :

      <a class="button" data-type="zoomout">link goes here</a>

  • How can I make this show up above all other elements on a page no matter what? I am using iscroll and this modal is constrained to the limits of the div that it is contained in.