Modal

.modal()

A modal can be created by using following codes.

<div class="modal">
    <div class="modal-wrapper">
        <div class="modal-header">
            ...
        </div>
        <hr>
        <div class="modal-content">
            ...
        </div>
        <hr>
        <div class="modal-footer">
            ...     
        </div>
    </div>
</div>

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        z-index:1000;
        background-color:rgba(0, 51, 102, 0.4);
        width:100vw;
        height:100vh;
        visibility: hidden;
    
    }
    .modal-wrapper {
        position: fixed;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 10vh;
        bottom: 0;
        min-height: 400px;
        height: 60vh;
        width: 60vw;
        z-index:1001;
        background-color:white;
        padding: 50px;
    
    }
    .modal-content {
        padding-top: 2%;
        height: 70%;
    }
    .modal-header {
        padding: 2px;
        font-size: large;
        height: 10%;
    }
    .modal-footer {
        position: relative;
        height: 10%;
        padding-top: 2%;
    }
    .modal-header > * {
        top: 50%; bottom: 50%;
        transform: translateY(-50%);
    }
    .modal-footer > * {
        position: absolute;
        right: 0;
        top: 50%; bottom: 50%;
        transform: translateY(-50%);
    
    }

You must initiliaze for all modal component

    $.modal()

action: "open" or "close"

    $(selector).modal("action")