Light Modal | Pure CSS
纯CSS模态窗口实现炫酷动画效果 A new lightweight, powerful and easy to use CSS Modal
How to Use
×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">×</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 usingAnimate.css animations.
That's It.
If you find any issue fell free to submit on Github.
×
Light modal is a pure CSS based modal. It works using :target property
Current animations are based on Animate.css.
However you are free to use your own animations. Just add your animation class to light-modal-content and you are good to go.
