纯CSS模态窗口实现炫酷动画效果|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库

Install via npm npm install light-modal

Or Download the Zip and include dist/css/light-modal.min.css in your page head.

Modal Markup:


		                    <div class="light-modal" id="unique-id" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
		        <div class="light-modal-content animated zoomInUp">
		            <!-- light modal header -->
		            <div class="light-modal-header">
		                <h3 class="light-modal-heading">Modal Title</h3>
		                <a href="#" class="light-modal-close-icon" aria-label="close">&times;</a>
		            </div>
		            <!-- light modal body -->
		            <div class="light-modal-body">
		                <!-- Your content -->
		            </div>
		            <!-- light modal footer -->
		            <div class="light-modal-footer">
		                <a href="#" class="light-modal-close-btn" aria-label="close">Close</a>
		            </div>
		        </div>
		    </div>

Note:If you don't need header and footer then simply exclude it.

How to Trigger?

You can open a modal by adding the id of the modal to any anchor tag e.g to open the above markup modal you need to add:

<a href="#unique-id" class="btn">Open Modal</a>

Note:Dont forget to add the # before the id. e.g #unique-id

Animation

To add an animation, include animation class to light-modal-content For demo i am using Animate.css animations.

That's It.
If you find any issue fell free to submit on Github.