Modals

Examples of the standard GoodLife Modals.

Default Modal

This is the default modal without any sort of decorations/modifiers/mutators. Generally this modal shouldn't be used, but there may be some use cases.

Modal

Open Default Modal With Anchor

</>

//Buttons Used:
<a href="#" class="m-2 p-1" data-toggle="modal" data-target="#exampleDefaultModal">Open Default Modal With Anchor</a>

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleDefaultModal">Open Default Modal With Button</button>

//Modal
<div class="modal" id="exampleDefaultModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Tiny Modal

This is the Tiny Modal, it should be reserved for short important notices that require immediate attention, such as errors when trying to submit a request.

.modal-tiny

</>

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleTinyModal">Open Tiny Modal With Button</button>
        
<div class="modal modal-tiny" id="exampleTinyModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tiny Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>I'm a Tiny Modal, and this is my body.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Full Screen Modal

This is the Full Screen Modal, this should be the most used modal to display content, popups, and forms

.modal-full

</>

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleFullScreenModal">Open Full Modal With Button</button>
<div class="modal modal-full" id="exampleFullScreenModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tiny Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>I'm a Full Screen Modal, and this is my body.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Floating Form Controls

Examples of the standard GoodLife Form Controls with floating placeholders.

Supports:

Inputs of type text
Inputs of type date
Textareas
Selects (Dropdowns)

Input Types

Examples of the different types of floating input containers for general html inputs

Input

Text Label

Date Label

Number Label

Password Label

</>

<div class="floating-input-container">
    <input type="text" class="form-control placeholder-form-control" />
    <span class="floating-label">Text Label</span>
</div>
<div class="floating-input-container">
    <input type="date" class="form-control placeholder-form-control" />
    <span class="floating-label">Date Label</span>
</div>
<div class="floating-input-container">
    <input type="number" class="form-control placeholder-form-control" />
    <span class="floating-label">Number Label</span>
</div>
<div class="floating-input-container">
    <input type="password" class="form-control placeholder-form-control" />
    <span class="floating-label">Password Label</span>
</div>

Selects

Example of a dropdown using the floating placeholder label
Note: The first option must be blank, disabled, selected and should have a value of "-1". This value will be hidden, and unselectable.

Select

Select Label

</>

<div class="floating-input-container">
    <select class="form-control valid placeholder-form-control" name="Select Name">
        <option disabled="disabled" selected="selected" value="-1"></option>
        <option value="1">First Option</option>
        <option value="2">Second Option</option>
        <option value="3">Third Option</option>
    </select>
    <span class="floating-label">Select Label</span>
</div>

Other Floating Input Elements

Examples of other elements utulizing the floating placeholder style.

Other

TextArea Placeholder

</>

<div class="floating-input-container">
    <textarea class="form-control placeholder-form-control"></textarea>
    <span class="floating-label">TextArea Placeholder</span>
</div>

Other Form Controls

More custom GoodLife form controls.

Other Floating Input Elements

Examples of other elements utulizing the floating placeholder style.

Other

I am a checkbox </>

Modals

Examples of the standard GoodLife Modals.

Default Modal

Tiny Modal

Full Screen Modal

Floating Form Controls

Examples of the standard GoodLife Form Controls with floating placeholders.

Supports:

Inputs of type text

Inputs of type date

Textareas

Selects (Dropdowns)

Input Types

Selects

Other Floating Input Elements

Other Form Controls

More custom GoodLife form controls.

Other Floating Input Elements