Light Modal - 100% Pure CSS Modal with Animations

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="false">
        <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.