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 feel free to submit on Github.

The Markup for gallery uses the same principle as of normal modal. We are targeting a new modal on the click of the left and right arrows. You can add any css animation to individual images.

 <div class="light-modal" id="gallery-modal-1" role="dialog" aria-labelledby="light-modal-label" aria-hidden="false">
        <div class="light-modal-content animated fadeIn">
            <img src="https://picsum.photos/800?random" alt="from unsplash">
            <a href="#" class="light-modal-close-icon" aria-label="close">×</a>
            <div class="light-modal-caption">This is the Image Gallery with Fade Effect.</div>
            <div class="light-modal-navigation">
                <a href="#gallery-modal-4" class="light-modal-navigation navigation-prev"></a>
                <a href="#gallery-modal-2" class="light-modal-navigation navigation-next"></a>
            </div>
        </div>
    </div>
<div class="light-modal" id="gallery-modal-2" role="dialog" aria-labelledby="light-modal-label" aria-hidden="false">
        <div class="light-modal-content animated flipInY">
            <img src="https://picsum.photos/700?random" alt="from unsplash">
            <a href="#" class="light-modal-close-icon" aria-label="close">×</a>
            <div class="light-modal-caption">You can use any css animation on each modal like this one.</div>
            <div class="light-modal-navigation">
                <a href="#gallery-modal-1" class="light-modal-navigation navigation-prev"></a>
                <a href="#gallery-modal-3" class="light-modal-navigation navigation-next"></a>
            </div>
        </div>
    </div>
<div class="light-modal" id="gallery-modal-3" role="dialog" aria-labelledby="light-modal-label" aria-hidden="false">
        <div class="light-modal-content animated rollIn">
            <img src="https://picsum.photos/600?random" alt="from unsplash">
            <a href="#" class="light-modal-close-icon" aria-label="close">×</a>
            <div class="light-modal-caption">I mean any...</div>
            <div class="light-modal-navigation">
                <a href="#gallery-modal-2" class="light-modal-navigation navigation-prev"></a>
                <a href="#gallery-modal-4" class="light-modal-navigation navigation-next"></a>
            </div>
        </div>
    </div>