animatedModal.js

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.

Demos

animatedIn: 'zoomIn',

animatedOut: 'bounceOut'

animatedIn: lightSpeedIn

animatedOut: bounceOutDown

animatedIn: bounceIn

animatedOut: bounceOut

1 Include Animate.css

	<head>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
	</head>

view raw animatecss.html hosted with ❤ by GitHub

2 Include inside <body> tag

	<body>
	<!--Call your modal-->
	<a id="demo01" href="#animatedModal">DEMO01</a>

	<!--DEMO01-->
	<div id="animatedModal">
	<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
	<div class="close-animatedModal">
	CLOSE MODAL
	</div>

	<div class="modal-content">
	<!--Your modal content goes here-->
	</div>
	</div>
	</body>

view raw index.html hosted with ❤ by GitHub

3 Include the Following js libraries

	<body>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="yourPath/animatedModal.min.js"></script>
	</body>

view raw animatedModal.html hosted with ❤ by GitHub

4 Basic Initialization

	<script>
	$("#demo01").animatedModal();
	</script>

view raw BasicInitialize.html hosted with ❤ by GitHub

Options

Variable	Default Value	Options	Description
color	#39BEB9	HEX, HSL, RGB, RBA	Define background color
animatedIn	zoomIn	Choose Here	Transition when the modal goes in
animatedOut	zoomOut	Choose Here	Transition when the modal goes out
animationDuration	.6s	seconds	Animation duration
overflow	auto	scroll; hidden; auto;	This makes your modal scrollable or not