Modals

Default Modal


<button class="modaltrigger" data-target="#demo1">Show</button>                                
<div class="modal" id="demo1">
    <div class="modalBox">
        <div class="mbHead">
            <div class="mbTitle">Modal Title</div>
            <div class="close" data-close="modal">×</div>
        </div>
        <div class="mbBody">
            ...
        </div>
        <div class="mbFooter">
            <button type="button" class="btn danger" data-close="modal">Close</button>
        </div>
    </div>
</div>

Large Modal


<button class="modaltrigger" data-target="#demo1">Show</button>                                
<div class="modal lg" id="demo1">
    <div class="modalBox">
        <div class="mbHead">
            <div class="mbTitle">Modal Title</div>
            <div class="close" data-close="modal">×</div>
        </div>
        <div class="mbBody">
            ...
        </div>
        <div class="mbFooter">
            <button type="button" class="btn danger" data-close="modal">Close</button>
        </div>
    </div>
</div>

Full screen Modal


<button class="modaltrigger" data-target="#demo1">Show</button>                                
<div class="modal fullScreen" id="demo1">
    <div class="modalBox">
        <div class="mbHead">
            <div class="mbTitle">Modal Title</div>
            <div class="close" data-close="modal">×</div>
        </div>
        <div class="mbBody">
            ...
        </div>
        <div class="mbFooter">
            <button type="button" class="btn danger" data-close="modal">Close</button>
        </div>
    </div>
</div>

Full screen Modal - Mobile


<button class="modaltrigger" data-target="#demo1">Show</button>                                
<div class="modal fullScreen mob" id="demo1">
    <div class="modalBox">
        <div class="mbHead">
            <div class="mbTitle">Modal Title</div>
            <div class="close" data-close="modal">×</div>
        </div>
        <div class="mbBody">
            ...
        </div>
        <div class="mbFooter">
            <button type="button" class="btn danger" data-close="modal">Close</button>
        </div>
    </div>
</div>

Previous Next