Modal

it is a dialog box that will show your content in the top of your page.

Example #

you can choose the modal shadow style by float or flat.

<div class="n-modal" tabindex="-1" role="dialog">
    <div class="n-modal-dialog">
        <div class="n-modal-content">
            <div class="n-modal-header">
                <h5 class="n-modal-title">Modal Title</h5>
                <button class="n-btn n-btn-xs" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="n-modal-body">
                Modal body hire
            </div>
            <div class="n-modal-footer">
                <button class="n-btn" data-dismiss="modal">
                    Close
                </button> 
            </div>
        </div>
    </div>
</div>

Live Demo #

you can click the button below to see the live demo.

<button className="n-btn" data-modal="#modal-2">
    Button with data-modal
</button>
<a className="n-btn ml-2" href="#modal-2" role="button">
    Anchor with href
</a>
<div id="modal-2" class="n-modal" tabindex="-1" role="dialog">
    <div class="n-modal-dialog">
        <div class="n-modal-content">
            <div class="n-modal-header">
                <h5 class="n-modal-title">Modal Header </h5>
                <button class="n-btn n-btn-xs" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="n-modal-body">
                <p>Lorem ipsum dolor...</p>
            </div>
            <div class="n-modal-footer">
                <button class="n-btn" data-dismiss="modal">
                    Close
                </button> 
            </div>
        </div>
    </div>
</div>

Anchor with href

Static Backdrop #

when you set data-backdrop="static" on .n-modal then it will not close even your click outside the modal.

<button class="n-btn" data-modal="#modal-3">
    Launch static backdrop modal
</button>
<div id="modal-3" class="n-modal" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="n-modal-dialog">
        <div class="n-modal-content">
            <div class="n-modal-header">
                <h5 class="n-modal-title">Modal Header </h5>
                <button class="n-btn n-btn-xs" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="n-modal-body">
                <div class="n-form-field">
                    <input class="n-form-control" type="text" placeholder="enter text..." name="text" />
                </div>
                <div class="n-form-field">
                    <label class="n-form-check"><input class="n-form-control" type="checkbox" name="cb" value="1" />checkbox</label>
                </div>
                <div class="n-form-field">
                    <label class="n-form-check"><input class="n-form-control" type="radio" name="r" value="1" />radio</label>
                </div>
                <div class="n-form-field">
                    <input class="n-form-control" type="range" name="range" />
                </div>
                <div class="n-form-field">
                    <input class="n-form-control" type="color" name="color" />
                </div>
                <div class="n-form-field">
                    <textarea class="n-form-control" name="comment" placeholder="enter comment..." />
                </div>
                <div class="n-form-field">
                    <select class="n-form-control" disabled>
                        <option value="">choose wisely...</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                    </select>
                </div>
            </div>
            <div class="n-modal-footer">
                <button class="n-btn" data-dismiss="modal">
                    Close
                </button>
                <button class="n-btn" data-dismiss="modal">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>

Optional sizes #

modals have three optional sizes .n-modal-sm, .n-modal-lg, and .n-modal-xl which can be apply in .n-modal-dialog class.

<button data-modal="#live-modal-sm" class="n-btn">
    Small Modal
</button>
<button data-modal="#live-modal-lg" class="n-btn">
    Large Modal
</button>
<button data-modal="#live-modal-xl" class="n-btn">
    Extra Large Modal
</button>
<div id="live-modal-sm" class="n-modal" tabindex="-1" role="dialog">
    <div class="n-modal-dialog n-modal-sm">
        <div class="n-modal-content">
            <div class="n-modal-header">
                <h5 class="n-modal-title">Modal Title</h5>
                <button class="n-btn n-btn-xs" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="n-modal-body">
                <p>Small modal.</p>
            </div>
            <div class="n-modal-footer">
                <button class="n-btn" data-dismiss="modal">
                    Close
                </button> 
            </div>
        </div>
    </div>
</div> 
<div id="live-modal-lg" class="n-modal" tabindex="-1" role="dialog">
    <div class="n-modal-dialog n-modal-lg">
        <div class="n-modal-content">
            <div class="n-modal-header">
                <h5 class="n-modal-title">Modal Title</h5>
                <button class="n-btn n-btn-xs" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="n-modal-body">
                <p>Large modal.</p>
            </div>
            <div class="n-modal-footer">
                <button class="n-btn" data-dismiss="modal">
                    Close
                </button> 
            </div>
        </div>
    </div>
</div> 
<div id="live-modal-xl" class="n-modal" tabindex="-1" role="dialog">
    <div class="n-modal-dialog n-modal-xl">
        <div class="n-modal-content">
            <div class="n-modal-header">
                <h5 class="n-modal-title">Modal Title</h5>
                <button class="n-btn n-btn-xs" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="n-modal-body">
                <p>Extra Large modal.</p>
            </div>
            <div class="n-modal-footer">
                <button class="n-btn" data-dismiss="modal">
                    Close
                </button> 
            </div>
        </div>
    </div>
</div>

Javascript #

using N.modal.getInstance(modalElement) it can initialize the .n-modal when it is not initialize yet and get the instance at the same time. if the .n-modal is already initialize, it will only get the instance.

document.addEventListener("DOMContentLoaded", (event) => {
    // apply the modal script to all .n-modal element
    const elements = document.querySelectorAll('.n-modal')
    elements.forEach((el) => {
        const instance = N.modal.getInstance(el)
    });
})

Methods #

Method Method	Return Return	Description Description
Instance.show	void	to show the modal programmatically.
Instance.close	void	to close the modal programmatically.
Instance.destroy	void	it is use to destroy and kill the modal instance.

Events #

All modal events are fired at the .n-modal element.

Event Event	Description Description
show.n.modal	This event fires immediately when the show instance method is called.
shown.n.modal	This event fires when the modal is completely shown (CSS transition is complete).
hide.n.modal	This event fires immediately when the close instance method is called.
hidden.n.modal	This event fires when the modal is completely hidden (CSS transition is complete).

const modal = document.querySelector('#my-modal')
modal.addEventListener('show.n.modal'. (event) => {
    // do something here...
})

DARK THEME

Modal

Warning!