jQuery Easing Effects

Question

vizz 0 Junior Poster

13 Years Ago

Here is my code for simple modal box
I want to use 'easeOutBounce' easing effect of jquery.easing.1.3.js.
How to bounce modal window while opening and closing?
Please help

For jQuery Easing Effects http://ralphwhitbeck.com/demos/jqueryui/effects/easing/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
    #mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 90;
        background-color: #000;
        display: none;
    }
    .window {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        display: none;
        z-index: 99;
        padding: 10px;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .window .close {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
    // Apply to all the Links which have the name attribute as modal
    $('a[name="modal"]').click(function(e) {

        //Cancel the link behavior
        e.preventDefault();

        // Get the ID of the Content Element
        var id = $(this).attr('href');

        // Get the Screen's Height and Width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        // Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width': maskWidth, 'height': maskHeight});

        // Transition Effect
        $('#mask').fadeIn("fast");
        $('#mask').fadeTo("fast",0.8);

        // Get the Window's Height and Width
        var winH = $(window).height();
        var winW = $(window).width();

        // Make the Content Window Center
        $(id).css('top',  (winH/2-$(id).height()/2<0)?0:winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        // Scroll smoothly to the Top
        $("html,body").animate({scrollTop: 0}, "fast");

        // Transition Effect
        $(id).fadeIn("fast");
    });

    // Handle the Close Function (Button)
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask').fadeOut("fast");
        $('.window').fadeOut("fast");
    });        

    // Handle the Close Function (Mask)
    $('#mask').click(function () {
        $('#mask').fadeOut("fast");
        $('.window').fadeOut("fast");
    });
});
</script>
</head>

<body>
    <div id="mask"></div>
    <a href="#cont" name="modal">Open</a>
    <div class="window" id="cont">
        Content
    </div>
</body>
</html>

javascript jquery

2 Contributors
12 Replies
199 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by vizz

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Vizz,

You have to move an element in order to get it to bounce.

Below, the principle is illustrated with "swing" (because I'm too lazy to install jQueryUI):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
    #mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 90;
        background-color: #000;
        display: none;
    }
    .window {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        display: none;
        z-index: 99;
        padding: 10px;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .window .close {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
	var $mask = $('#mask');
	var $doc = $(document);
	var $win = $(window);
	var $winClass = $(".window");
	var $closeButtons = $winClass.find('.close');

	// Apply to all the Links which have the name attribute as modal
	$('a.modal').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();

		// Get the ID of the Content Element
		var $id = $($(this).attr('href'));

		// Set height and width to mask to fill up the whole screen, then Transition Effects
		var dims = {
			width: $win.width(),
			height: $doc.height()
		};
		$mask.css(dims).fadeIn("fast").fadeTo("fast", 0.8);

		// Make the Content Window Center, and Transition Effects
		var props1 = {
			top: $id.height() * -1,
			left: ($win.width() - $id.width())/2,
		};
		var props2 = {
			top: Math.max(0, ($win.height()-$id.height())/2),
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 1200,
			easing: "swing"//use "easeOutBounce" with jQueryUI installed.
		};
		$id.css(props1).animate(props2,options).fadeIn(1200);

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});

	// Handle the Close Function (Button)
	$closeButtons.add($mask).click(function(e){
		e.preventDefault();
		$mask.fadeOut("fast");
		$winClass.fadeOut("fast");
	});
});
</script>
</head>

<body>
    <div id="mask"></div>
    <a href="#cont" class="modal">Open</a>
    <div class="window" id="cont">
        Content
    </div>
</body>
</html>

You will see that I tidied the code a bit, particularly to minimise both the number of jQuery objects and the amount of work necessary in the click handlers.

You will need to play around with the various settings to achieve more closely the effect you want. In particular, remember to install jQueryUI on the page and to change my "swing" to "easeOutBounce" to get the bounce effect.

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Vizz,

There's a lot of work in something like that. I would not try to write it myself as it already exists, and many other similar slideshows are available - free of charge.

Suggest you track down and use the same script or find another by searching the web for "javascript slideshow" or "jQuery slideshow plugin".

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Vizz,

You should be able to achieve that effect with .animate(...).

Try applying this patch to lines 60-77 of my previous code:

...
		// Make the Content Window Center, and Transition Effects
		var w = $id.width(), h = $id.height();
		var props1 = {
			top: $win.height()/2,
			left: $win.width()/2,
			height: 0,
			width: 0
		};
		var props2 = {
			top: Math.max(0, ($win.height() - h)/2),
			left: Math.max(0, ($win.width() - w)/2),
			height: h,
			width: w
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 700,
			easing: "easeOutBounce"
		};
		$id.css(props1).animate(props2,options).fadeIn(700);

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});
...

Airshow

Edited 13 Years Ago by Airshow because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vizz 0 Junior Poster · Answer 1 · 2011-07-20T14:54:58+00:00

Thanks it worked well.
I have added some,

<div id="mask"></div>
    <a href="#cont" class="modal">Open</a>
    <div class="window" id="cont">
        Content
		
	<div style="font-size: 10pt;">
		<a href="#" class="close">Close</a>
	</div> 
			
    </div>

Can u help me to create like this,
http://jqchecking.blogspot.com/p/bump-box.html

Vizz,

You have to move an element in order to get it to bounce.

Below, the principle is illustrated with "swing" (because I'm too lazy to install jQueryUI):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
    #mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 90;
        background-color: #000;
        display: none;
    }
    .window {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        display: none;
        z-index: 99;
        padding: 10px;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .window .close {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
	var $mask = $('#mask');
	var $doc = $(document);
	var $win = $(window);
	var $winClass = $(".window");
	var $closeButtons = $winClass.find('.close');

	// Apply to all the Links which have the name attribute as modal
	$('a.modal').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();

		// Get the ID of the Content Element
		var $id = $($(this).attr('href'));

		// Set height and width to mask to fill up the whole screen, then Transition Effects
		var dims = {
			width: $win.width(),
			height: $doc.height()
		};
		$mask.css(dims).fadeIn("fast").fadeTo("fast", 0.8);

		// Make the Content Window Center, and Transition Effects
		var props1 = {
			top: $id.height() * -1,
			left: ($win.width() - $id.width())/2,
		};
		var props2 = {
			top: Math.max(0, ($win.height()-$id.height())/2),
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 1200,
			easing: "swing"//use "easeOutBounce" with jQueryUI installed.
		};
		$id.css(props1).animate(props2,options).fadeIn(1200);

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});

	// Handle the Close Function (Button)
	$closeButtons.add($mask).click(function(e){
		e.preventDefault();
		$mask.fadeOut("fast");
		$winClass.fadeOut("fast");
	});
});
</script>
</head>

<body>
    <div id="mask"></div>
    <a href="#cont" class="modal">Open</a>
    <div class="window" id="cont">
        Content
    </div>
</body>
</html>

You will see that I tidied the code a bit, particularly to minimise both the number of jQuery objects and the amount of work necessary in the click handlers.

You will need to play around with the various settings to achieve more closely the effect you want. In particular, remember to install jQueryUI on the page and to change my "swing" to "easeOutBounce" to get the bounce effect.

Airshow

vizz 0 Junior Poster · Answer 2 · 2011-07-20T18:14:36+00:00

Thanks for reply :)

I don't want to create slideshow. I just want that Bounce effect.
I want to combine "easeOutBounce" and "scale" or "explode"

I got "easeOutBounce" with your coding but I am not getting howto combine "easeOutBounce" with above effects for modal box.

I am trying to combine "scale" or "explode" anyone effect with "easeOutBounce".

pls reply

Vizz,
There's a lot of work in something like that. I would not try to write it myself as it already exists, and many other similar slideshows are available - free of charge.
Suggest you track down and use the same script or find another by searching the web for "javascript slideshow" or "jQuery slideshow plugin".
Airshow

vizz 0 Junior Poster · Answer 3 · 2011-07-20T23:55:47+00:00

hey thanks , but it does't worked
Thanks for reply
Can you help me to add this function to your previous code?

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <title>This is what I want </title> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script> 
  
  
  
  <style type='text/css'> 
    #mydiv{
    width:300px;
    height:300px;
    background:red;
    display:none;
    margin-top:30px;
}
  </style> 
  
  <script type='text/javascript'> 
  //<![CDATA[ 
  $(window).load(function(){
  $('button').click(function()
  	{
    	$('#mydiv').animate({
    width: ['toggle', 'easeOutBounce'],
    height: ['toggle', 'easeOutBounce'],
  }, {
    duration: 5000,
    specialEasing: {
      width: 'easeOutBounce',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
		
	});
  });
  //]]> 
  </script> 
  
  
  <script src="js/jquery.effects.core.js"></script>	
	<script src="js/jquery.effects.bounce.js"></script>
</head> 
<body> 
  <button>clickme</button> 
<div id="mydiv"><h1>Vizz</h1></div> 
 
  
</body> 
 
 
</html>

Vizz,

You should be able to achieve that effect with .animate(...).

Try applying this patch to lines 60-77 of my previous code:

...
		// Make the Content Window Center, and Transition Effects
		var w = $id.width(), h = $id.height();
		var props1 = {
			top: $win.height()/2,
			left: $win.width()/2,
			height: 0,
			width: 0
		};
		var props2 = {
			top: Math.max(0, ($win.height() - h)/2),
			left: Math.max(0, ($win.width() - w)/2),
			height: h,
			width: w
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 700,
			easing: "easeOutBounce"
		};
		$id.css(props1).animate(props2,options).fadeIn(700);

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});
...

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-07-21T01:30:04+00:00

hey thanks , but it does't worked
Thanks for reply
Can you help me to add this function to your previous code?

Let's give that patch another try first. Did you remember to add jQueryUI again?

Anyway, here's the whole file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
    #mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 90;
        background-color: #000;
        display: none;
    }
    .window {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        display: none;
        z-index: 99;
        padding: 10px;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .window .close {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
	var $mask = $('#mask');
	var $doc = $(document);
	var $win = $(window);
	var $winClass = $(".window");
	var $closeButtons = $winClass.find('.close');

	// Apply to all the Links which have the name attribute as modal
	$('a.modal').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();

		// Get the ID of the Content Element
		var $id = $($(this).attr('href'));

		// Set height and width to mask to fill up the whole screen, then Transition Effects
		var dims = {
			width: $win.width(),
			height: $doc.height()
		};
		$mask.css(dims).fadeIn("fast").fadeTo("fast", 0.8);

		// Make the Content Window Center, and Transition Effects
		var $c = $id.find(".content").show();//Hide content
		var w = $id.width(), h = $id.height();
		$c.hide();//Hide content
		
		var props1 = {
			top: $win.height()/2,
			left: $win.width()/2,
			height: 0,
			width: 0
		};
		var props2 = {
			top: Math.max(0, ($win.height() - h)/2),
			left: Math.max(0, ($win.width() - w)/2),
			height: h,
			width: w
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 800,
			easing: "easeOutBounce"
		};
		$id.css(props1).animate(props2,options).fadeIn(800, function(){
			$c.fadeIn(4000);
		});

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});

	// Handle the Close Function (Button)
	$closeButtons.add($mask).click(function(e){
		e.preventDefault();
		$mask.fadeOut("fast");
		$winClass.fadeOut("fast");
	});
});
</script>
</head>

<body>

	<div id="mask"></div>
    <a href="#cont1" class="modal">Open</a>
    <div class="window" id="cont1" style="width:85%;">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus magna, ultrices ut semper in, consequat eu nibh. Aliquam volutpat lacinia erat, eu eleifend libero suscipit nec. Aenean a quam sed diam viverra gravida ut viverra nisi. Vivamus metus est, semper sit amet rutrum ut, dapibus ut ante. Praesent ultricies, ipsum quis commodo suscipit, sem libero feugiat libero, ut tristique purus tellus ac lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur lacus ligula, rutrum et rhoncus non, convallis at enim. Ut auctor pellentesque ligula id consectetur. Nulla leo nunc, cursus vitae tempus ac, tristique non orci. Aliquam iaculis luctus viverra. Nunc et magna tortor. Nullam nec turpis odio, vitae auctor purus. Pellentesque eget nibh ultrices risus egestas vestibulum. In justo tellus, auctor vel laoreet eu, mattis vitae justo. Sed diam mauris, luctus nec dapibus vel, porta elementum enim. </p>
			<p>Proin tempus blandit enim eget convallis. Phasellus elementum vestibulum tempus. Fusce sollicitudin sapien in sapien faucibus venenatis. Maecenas ornare, nibh ac facilisis posuere, nibh dolor cursus elit, eu dapibus odio tellus ac risus. Phasellus ante magna, interdum vitae laoreet sed, ullamcorper vitae ligula. Vivamus sagittis auctor purus in blandit. Phasellus non lacus sed nibh tempor blandit. Pellentesque et neque id ipsum hendrerit interdum in in enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus turpis nibh, gravida ac egestas id, ullamcorper non diam. Donec quis odio quis velit condimentum accumsan quis ut sapien. Curabitur sem urna, dapibus eu ornare a, viverra bibendum lorem. Sed vel lacinia nulla. Curabitur sagittis facilisis lectus id vehicula. Nam sollicitudin rutrum scelerisque. Pellentesque lobortis pharetra massa, viverra malesuada arcu pretium eu. Vestibulum accumsan rhoncus elit nec sodales. Donec mollis viverra condimentum.</p>
			<p>Maecenas orci nibh, lacinia ullamcorper euismod non, sodales eget nunc. Vestibulum quis sapien augue, a tempor sem. Proin sit amet rhoncus magna. Vestibulum ornare consectetur nisi in elementum. Vivamus posuere rutrum quam, sed hendrerit arcu tempus posuere. Suspendisse potenti. Donec ullamcorper dui in eros aliquet eget sodales massa sodales. Quisque sapien mi, luctus vitae vehicula eget, pellentesque id sem. Fusce pellentesque tellus ut nunc tristique interdum. Maecenas pellentesque scelerisque mauris, ac sollicitudin tellus porta a.</p>
		</div>
    </div>
</body>
</html>

Here I have added a small extra tweak, to keep the content hidden until the .window has finished animating, then the content fades in.

Airshow

vizz 0 Junior Poster · Answer 5 · 2011-07-21T07:59:38+00:00

Hey nice work man!!!
Thanks. :)

Just last thing How to add same bounce effect while closing modal window?

Let's give that patch another try first. Did you remember to add jQueryUI again?

Anyway, here's the whole file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
    #mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 90;
        background-color: #000;
        display: none;
    }
    .window {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        display: none;
        z-index: 99;
        padding: 10px;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .window .close {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
	var $mask = $('#mask');
	var $doc = $(document);
	var $win = $(window);
	var $winClass = $(".window");
	var $closeButtons = $winClass.find('.close');

	// Apply to all the Links which have the name attribute as modal
	$('a.modal').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();

		// Get the ID of the Content Element
		var $id = $($(this).attr('href'));

		// Set height and width to mask to fill up the whole screen, then Transition Effects
		var dims = {
			width: $win.width(),
			height: $doc.height()
		};
		$mask.css(dims).fadeIn("fast").fadeTo("fast", 0.8);

		// Make the Content Window Center, and Transition Effects
		var $c = $id.find(".content").show();//Hide content
		var w = $id.width(), h = $id.height();
		$c.hide();//Hide content
		
		var props1 = {
			top: $win.height()/2,
			left: $win.width()/2,
			height: 0,
			width: 0
		};
		var props2 = {
			top: Math.max(0, ($win.height() - h)/2),
			left: Math.max(0, ($win.width() - w)/2),
			height: h,
			width: w
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 800,
			easing: "easeOutBounce"
		};
		$id.css(props1).animate(props2,options).fadeIn(800, function(){
			$c.fadeIn(4000);
		});

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});

	// Handle the Close Function (Button)
	$closeButtons.add($mask).click(function(e){
		e.preventDefault();
		$mask.fadeOut("fast");
		$winClass.fadeOut("fast");
	});
});
</script>
</head>

<body>

	<div id="mask"></div>
    <a href="#cont1" class="modal">Open</a>
    <div class="window" id="cont1" style="width:85%;">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus magna, ultrices ut semper in, consequat eu nibh. Aliquam volutpat lacinia erat, eu eleifend libero suscipit nec. Aenean a quam sed diam viverra gravida ut viverra nisi. Vivamus metus est, semper sit amet rutrum ut, dapibus ut ante. Praesent ultricies, ipsum quis commodo suscipit, sem libero feugiat libero, ut tristique purus tellus ac lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur lacus ligula, rutrum et rhoncus non, convallis at enim. Ut auctor pellentesque ligula id consectetur. Nulla leo nunc, cursus vitae tempus ac, tristique non orci. Aliquam iaculis luctus viverra. Nunc et magna tortor. Nullam nec turpis odio, vitae auctor purus. Pellentesque eget nibh ultrices risus egestas vestibulum. In justo tellus, auctor vel laoreet eu, mattis vitae justo. Sed diam mauris, luctus nec dapibus vel, porta elementum enim. </p>
			<p>Proin tempus blandit enim eget convallis. Phasellus elementum vestibulum tempus. Fusce sollicitudin sapien in sapien faucibus venenatis. Maecenas ornare, nibh ac facilisis posuere, nibh dolor cursus elit, eu dapibus odio tellus ac risus. Phasellus ante magna, interdum vitae laoreet sed, ullamcorper vitae ligula. Vivamus sagittis auctor purus in blandit. Phasellus non lacus sed nibh tempor blandit. Pellentesque et neque id ipsum hendrerit interdum in in enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus turpis nibh, gravida ac egestas id, ullamcorper non diam. Donec quis odio quis velit condimentum accumsan quis ut sapien. Curabitur sem urna, dapibus eu ornare a, viverra bibendum lorem. Sed vel lacinia nulla. Curabitur sagittis facilisis lectus id vehicula. Nam sollicitudin rutrum scelerisque. Pellentesque lobortis pharetra massa, viverra malesuada arcu pretium eu. Vestibulum accumsan rhoncus elit nec sodales. Donec mollis viverra condimentum.</p>
			<p>Maecenas orci nibh, lacinia ullamcorper euismod non, sodales eget nunc. Vestibulum quis sapien augue, a tempor sem. Proin sit amet rhoncus magna. Vestibulum ornare consectetur nisi in elementum. Vivamus posuere rutrum quam, sed hendrerit arcu tempus posuere. Suspendisse potenti. Donec ullamcorper dui in eros aliquet eget sodales massa sodales. Quisque sapien mi, luctus vitae vehicula eget, pellentesque id sem. Fusce pellentesque tellus ut nunc tristique interdum. Maecenas pellentesque scelerisque mauris, ac sollicitudin tellus porta a.</p>
		</div>
    </div>
</body>
</html>

Here I have added a small extra tweak, to keep the content hidden until the .window has finished animating, then the content fades in.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2011-07-21T22:07:35+00:00

I'm working on it ..... currently works fine unless close comes very quickly after open, in which case the reopened content fails to fade in fully.

I just need to find the right workaround.

Will post ASAP.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2011-07-21T22:31:36+00:00

OK, I think I have it.

Here's the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
	#mask {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 90;
		background-color: #012;
		display: none;
	}
	.window {
		position: absolute;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
		display: none;
		z-index: 99;
		padding: 10px;
		background-color: #fff;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.window .close {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.content {
		font-size: 11px;
		font-family: verdana;
		color: #336699;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
	var $mask = $('#mask');
	var $doc = $(document);
	var $win = $(window);
	var $winClass = $(".window");
	var $closeButtons = $winClass.find('.close');
	var $currentWin, w, h;
	
	// Apply to all the Links which have the name attribute as modal
	$('a.modal').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();

		// Get the ID of the Content Element
		$currentWin = $($(this).attr('href'));
		var $c = $currentWin.find(".content");

		// Set height and width to mask to fill up the whole screen, then Transition Effects
		var dims = {
			width: $win.width(),
			height: $doc.height()
		};
		$mask.css(dims).fadeIn("fast").fadeTo("fast", 0.8);

		// Re-initialise currentWin and its content
		$c.stop().css('opacity',1.0).show();//Show content
		$currentWin.stop().css('opacity',1.0).show();

		// Make the Content Window Center, and Transition Effects
		w = $currentWin.width();//measure
		h = $currentWin.height();//measure

		// Hide currentWin and its content so they can be brought back with the desired animation
		$c.hide();//Hide content 
		$currentWin.hide();//Hide currentWin 
		
		var props1 = {
			top: $win.height()/2,
			left: $win.width()/2,
			height: 0,
			width: 0
		};
		var props2 = {
			top: Math.max(0, ($win.height() - h)/2),
			left: Math.max(0, ($win.width() - w)/2),
			height: h,
			width: w
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 800,
			easing: "easeOutBounce"
		};
		$currentWin.css(props1).animate(props2,options).fadeIn(800, function(){
			$c.fadeIn(4000);
		});

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});

	// Handle the Close Function (Button)
	$closeButtons.add($mask).click(function(e){
		e.preventDefault();
		var $c = $currentWin.find(".content");
		if($currentWin){
			var props = {
				top: $win.height()/2,
				left: $win.width()/2,
				height: 0,
				width: 0
			};
			var options = {
				duration: 800,
				easing: "easeOutBounce",
				complete: function(){
					$(this).hide().css({width:w, height:h});
					$mask.fadeOut("fast");
				}
			};
			$c.stop().hide();//stop any extant animation, then hide.
			$currentWin.stop().animate(props,options);//stop any extant animation, then animate-close.
		}
	});
});
</script>
</head>

<body>

	<div id="mask"></div>
	<a href="#cont1" class="modal">Open</a>
	<div class="window" id="cont1" style="width:85%;">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus magna, ultrices ut semper in, consequat eu nibh. Aliquam volutpat lacinia erat, eu eleifend libero suscipit nec. Aenean a quam sed diam viverra gravida ut viverra nisi. Vivamus metus est, semper sit amet rutrum ut, dapibus ut ante. Praesent ultricies, ipsum quis commodo suscipit, sem libero feugiat libero, ut tristique purus tellus ac lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur lacus ligula, rutrum et rhoncus non, convallis at enim. Ut auctor pellentesque ligula id consectetur. Nulla leo nunc, cursus vitae tempus ac, tristique non orci. Aliquam iaculis luctus viverra. Nunc et magna tortor. Nullam nec turpis odio, vitae auctor purus. Pellentesque eget nibh ultrices risus egestas vestibulum. In justo tellus, auctor vel laoreet eu, mattis vitae justo. Sed diam mauris, luctus nec dapibus vel, porta elementum enim. </p>
			<p>Proin tempus blandit enim eget convallis. Phasellus elementum vestibulum tempus. Fusce sollicitudin sapien in sapien faucibus venenatis. Maecenas ornare, nibh ac facilisis posuere, nibh dolor cursus elit, eu dapibus odio tellus ac risus. Phasellus ante magna, interdum vitae laoreet sed, ullamcorper vitae ligula. Vivamus sagittis auctor purus in blandit. Phasellus non lacus sed nibh tempor blandit. Pellentesque et neque id ipsum hendrerit interdum in in enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus turpis nibh, gravida ac egestas id, ullamcorper non diam. Donec quis odio quis velit condimentum accumsan quis ut sapien. Curabitur sem urna, dapibus eu ornare a, viverra bibendum lorem. Sed vel lacinia nulla. Curabitur sagittis facilisis lectus id vehicula. Nam sollicitudin rutrum scelerisque. Pellentesque lobortis pharetra massa, viverra malesuada arcu pretium eu. Vestibulum accumsan rhoncus elit nec sodales. Donec mollis viverra condimentum.</p>
			<p>Maecenas orci nibh, lacinia ullamcorper euismod non, sodales eget nunc. Vestibulum quis sapien augue, a tempor sem. Proin sit amet rhoncus magna. Vestibulum ornare consectetur nisi in elementum. Vivamus posuere rutrum quam, sed hendrerit arcu tempus posuere. Suspendisse potenti. Donec ullamcorper dui in eros aliquet eget sodales massa sodales. Quisque sapien mi, luctus vitae vehicula eget, pellentesque id sem. Fusce pellentesque tellus ut nunc tristique interdum. Maecenas pellentesque scelerisque mauris, ac sollicitudin tellus porta a.</p>
		</div>
	</div>
</body>
</html>

Airshow

vizz 0 Junior Poster · Answer 8 · 2011-07-21T23:12:43+00:00

Thanks
:)

I'm working on it ..... currently works fine unless close comes very quickly after open, in which case the reopened content fails to fade in fully.
I just need to find the right workaround.
Will post ASAP.
Airshow

vizz 0 Junior Poster · Answer 9 · 2011-07-23T10:39:18+00:00

How to add close button to modal window using,

$currentWin.fadeIn().css({ 'width' }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

OK, I think I have it.

Here's the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Window</title>
<style type="text/css">
	#mask {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 90;
		background-color: #012;
		display: none;
	}
	.window {
		position: absolute;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
		display: none;
		z-index: 99;
		padding: 10px;
		background-color: #fff;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.window .close {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.content {
		font-size: 11px;
		font-family: verdana;
		color: #336699;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
// Do all these functions when the document is loaded fully
$(document).ready(function(){
	var $mask = $('#mask');
	var $doc = $(document);
	var $win = $(window);
	var $winClass = $(".window");
	var $closeButtons = $winClass.find('.close');
	var $currentWin, w, h;
	
	// Apply to all the Links which have the name attribute as modal
	$('a.modal').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();

		// Get the ID of the Content Element
		$currentWin = $($(this).attr('href'));
		var $c = $currentWin.find(".content");

		// Set height and width to mask to fill up the whole screen, then Transition Effects
		var dims = {
			width: $win.width(),
			height: $doc.height()
		};
		$mask.css(dims).fadeIn("fast").fadeTo("fast", 0.8);

		// Re-initialise currentWin and its content
		$c.stop().css('opacity',1.0).show();//Show content
		$currentWin.stop().css('opacity',1.0).show();

		// Make the Content Window Center, and Transition Effects
		w = $currentWin.width();//measure
		h = $currentWin.height();//measure

		// Hide currentWin and its content so they can be brought back with the desired animation
		$c.hide();//Hide content 
		$currentWin.hide();//Hide currentWin 
		
		var props1 = {
			top: $win.height()/2,
			left: $win.width()/2,
			height: 0,
			width: 0
		};
		var props2 = {
			top: Math.max(0, ($win.height() - h)/2),
			left: Math.max(0, ($win.width() - w)/2),
			height: h,
			width: w
		};
		var options = {
			queue: false,//to make the slide and fade animations simultaneous.
			duration: 800,
			easing: "easeOutBounce"
		};
		$currentWin.css(props1).animate(props2,options).fadeIn(800, function(){
			$c.fadeIn(4000);
		});

		// Scroll smoothly to the Top
		$("html,body").animate({scrollTop: 0}, "fast");
	});

	// Handle the Close Function (Button)
	$closeButtons.add($mask).click(function(e){
		e.preventDefault();
		var $c = $currentWin.find(".content");
		if($currentWin){
			var props = {
				top: $win.height()/2,
				left: $win.width()/2,
				height: 0,
				width: 0
			};
			var options = {
				duration: 800,
				easing: "easeOutBounce",
				complete: function(){
					$(this).hide().css({width:w, height:h});
					$mask.fadeOut("fast");
				}
			};
			$c.stop().hide();//stop any extant animation, then hide.
			$currentWin.stop().animate(props,options);//stop any extant animation, then animate-close.
		}
	});
});
</script>
</head>

<body>

	<div id="mask"></div>
	<a href="#cont1" class="modal">Open</a>
	<div class="window" id="cont1" style="width:85%;">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus magna, ultrices ut semper in, consequat eu nibh. Aliquam volutpat lacinia erat, eu eleifend libero suscipit nec. Aenean a quam sed diam viverra gravida ut viverra nisi. Vivamus metus est, semper sit amet rutrum ut, dapibus ut ante. Praesent ultricies, ipsum quis commodo suscipit, sem libero feugiat libero, ut tristique purus tellus ac lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur lacus ligula, rutrum et rhoncus non, convallis at enim. Ut auctor pellentesque ligula id consectetur. Nulla leo nunc, cursus vitae tempus ac, tristique non orci. Aliquam iaculis luctus viverra. Nunc et magna tortor. Nullam nec turpis odio, vitae auctor purus. Pellentesque eget nibh ultrices risus egestas vestibulum. In justo tellus, auctor vel laoreet eu, mattis vitae justo. Sed diam mauris, luctus nec dapibus vel, porta elementum enim. </p>
			<p>Proin tempus blandit enim eget convallis. Phasellus elementum vestibulum tempus. Fusce sollicitudin sapien in sapien faucibus venenatis. Maecenas ornare, nibh ac facilisis posuere, nibh dolor cursus elit, eu dapibus odio tellus ac risus. Phasellus ante magna, interdum vitae laoreet sed, ullamcorper vitae ligula. Vivamus sagittis auctor purus in blandit. Phasellus non lacus sed nibh tempor blandit. Pellentesque et neque id ipsum hendrerit interdum in in enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus turpis nibh, gravida ac egestas id, ullamcorper non diam. Donec quis odio quis velit condimentum accumsan quis ut sapien. Curabitur sem urna, dapibus eu ornare a, viverra bibendum lorem. Sed vel lacinia nulla. Curabitur sagittis facilisis lectus id vehicula. Nam sollicitudin rutrum scelerisque. Pellentesque lobortis pharetra massa, viverra malesuada arcu pretium eu. Vestibulum accumsan rhoncus elit nec sodales. Donec mollis viverra condimentum.</p>
			<p>Maecenas orci nibh, lacinia ullamcorper euismod non, sodales eget nunc. Vestibulum quis sapien augue, a tempor sem. Proin sit amet rhoncus magna. Vestibulum ornare consectetur nisi in elementum. Vivamus posuere rutrum quam, sed hendrerit arcu tempus posuere. Suspendisse potenti. Donec ullamcorper dui in eros aliquet eget sodales massa sodales. Quisque sapien mi, luctus vitae vehicula eget, pellentesque id sem. Fusce pellentesque tellus ut nunc tristique interdum. Maecenas pellentesque scelerisque mauris, ac sollicitudin tellus porta a.</p>
		</div>
	</div>
</body>
</html>

Airshow