Getting started Introduction Download Contents Browsers and devices Components Navbar Slider Alert Collapse Button Forms Modals Ajax Toasts ScrollTo Charts Add-ons Magazine - Slider Magazine - Display Article Magazine - Newsletter Magazine - Footer Magazine - Button Background Moving With A Mousev

Modal

Use LaarmWork’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Examples

Modal components.


<link href="https://laarmwork.arnaudjacques.fr/res/css/modals.css" rel="stylesheet">
<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
            

<button class="btn max-content" data-toggle="modal" data-target="#exampleModal">Open modal</button>
<div id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal">
    <div class="content shadow-hover-1">
        <div class="top p-2">
            <h5 class="title" id="exampleModalLabel">Modal title</h5>
        </div>
        <div class="middle p-2">
            <p>...</p>
        </div>
        <div class="bottom p-2 flex">
            <button class="btn light mgl-auto m-r-2 max-content" data-dismiss="modal" aria-label="Close">Close</button>
            <button class="btn max-content">Save changes</button>
        </div>
        <button type="button" class="btn danger close" data-dismiss="modal" aria-label="Close">
            <span>×</span>
        </button>
    </div>
</div>

Just add class ".max-90" for scroll in content, by default, you scroll all modal


<button class="btn max-content" data-toggle="modal" data-target="#exampleModal2">Open modal</button>
<div id="exampleModal2" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true" class="modal">
    <div class="content shadow-hover-1">
        <div class="top p-2">
            <h5 class="title" id="exampleModalLabel2">Modal title</h5>
        </div>
        <div class="middle p-2 max-80">
            <p>...</p>
        </div>
        <div class="bottom p-2 flex">
            <button class="btn light mgl-auto m-r-2 max-content" data-dismiss="modal" aria-label="Close">Close</button>
            <button class="btn max-content">Save changes</button>
        </div>
        <button type="button" class="btn danger close" data-dismiss="modal" aria-label="Close">
            <span>×</span>
        </button>
    </div>
</div>

You can pass params


<div class="flex">
    <button class="btn max-content m-r-2" data-toggle="modal" data-target="#exampleModal3" data-param-1=".email,input,contact@arnaudjacques.fr" data-param-2=".phone,input,07-51-63-79-16" data-param-3=".textarea,textarea,<h2>Title H2</h2>" data-param-4=".select,select,2">Open modal</button>
    <button class="btn max-content" data-toggle="modal" data-target="#exampleModal3" data-param-1=".email,input,contact@etrevegetarien.fr" data-param-2=".phone,input, " data-param-3=".textarea,textarea,<h3>Title H3</h3>" data-param-4=".select,select,4">Open modal</button>
</div>
<div id="exampleModal3" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true" class="modal">
    <div class="content shadow-hover-1">
        <div class="top p-2">
            <h5 class="title" id="exampleModalLabel3">Modal title</h5>
        </div>
        <div class="middle p-2">
            <p>Woohoo, you're reading this text in a modal!</p>
            <div class="form-group flex column m-t-1">
                <label for="email">Email address</label>
                <input type="email" class="form-text email" id="email">
            </div>
        </div>
        <div class="middle p-2">
            <div class="form-group flex column m-t-1">
                <label for="phone">Phone</label>
                <input type="email" class="form-text phone" id="phone">
            </div>
        </div>
        <div class="form-group flex column m-t-1 p-2">
            <label for="select">Example select</label>
            <select class="form-text select" id="select">
                <option selected disabled>Choose an option</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <div class="form-group flex column m-t-1 p-2">
            <label for="exampleTextarea">Textarea</label>
            <textarea class="form-text textarea" id="exampleTextarea" rows="3"></textarea>
        </div>
        <div class="bottom p-2 flex">
            <button class="btn light mgl-auto m-r-2 max-content" data-dismiss="modal" aria-label="Close">Close</button>
            <button class="btn max-content">Save changes</button>
        </div>
        <button type="button" class="btn danger close" data-dismiss="modal" aria-label="Close">
            <span>×</span>
        </button>
    </div>
</div>