Github GitLab NPM Package
Logout

Dialog

The dialog is in Cosmo CSS an option to ask your user for data or confirmation.

Since Cosmo CSS is a CSS only library, you need to implement the modal functionality yourself.

Modal title

Show code sample 
<div class="cosmo-modal__container">
    <div class="cosmo-modal">
        <h1 class="cosmo-modal__title">Modal title</h1>
        <div class="cosmo-modal__content">
            <div class="cosmo-input__group">
                <label for="textInput" class="cosmo-label">Text input</label>
                <input type="text" id="textInput" class="cosmo-input">
                <div class="cosmo-input__group is--checkbox">
                    <input type="checkbox" id="checkboxInput" class="cosmo-checkbox">
                    <label for="checkboxInput">Checkbox input</label>
                </div>
                <label class="cosmo-label is--radio">Radios</label>
                <div class="cosmo-input__group is--radio">
                    <input name="radio" type="radio" id="radioInput1" class="cosmo-radio">
                    <label for="radioInput1">Radio input 1</label>
                    <input name="radio" type="radio" id="radioInput2" class="cosmo-radio">
                    <label for="radioInput2">Radio input 2</label>
                    <input name="radio" type="radio" id="radioInput3" class="cosmo-radio">
                    <label for="radioInput3">Radio input 3</label>
                </div>
            </div>
        </div>
        <div class="cosmo-modal__button-bar">
            <button id="cancel" class="cosmo-button">Cancel</button>
            <button id="save" class="cosmo-button">Save changes</button>
        </div>
    </div>
</div>
<script>
    document.getElementById('openModal').addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelector('.cosmo-modal__container').removeAttribute('style');
    });
    document.getElementById('cancel').addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelector('.cosmo-modal__container').style.display = 'none';
    });
    document.getElementById('save').addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelector('.cosmo-modal__container').style.display = 'none';
    });
</script>

Type variations

Dialogs are available in five different types. The default type uses the primary color for the last button in the button bar and the bar above the title.

Default dialog

<div class="cosmo-modal">
    <h1 class="cosmo-modal__title">Default dialog</h1>
    <div class="cosmo-modal__content">
        <pre class="cosmo-docs-container">
        </pre>
    </div>
    <div class="cosmo-modal__button-bar">
        <button class="cosmo-button">Cancel</button>
        <button class="cosmo-button">Save changes</button>
    </div>
</div>

Positive dialog

<div class="cosmo-modal is--positive">
    <h1 class="cosmo-modal__title">Positive dialog</h1>
    <div class="cosmo-modal__content">
        <pre class="cosmo-docs-container">
        </pre>
    </div>
    <div class="cosmo-modal__button-bar">
        <button class="cosmo-button">Cancel</button>
        <button class="cosmo-button">Save changes</button>
    </div>
</div>

Negative dialog

<div class="cosmo-modal is--negative">
    <h1 class="cosmo-modal__title">Negative dialog</h1>
    <div class="cosmo-modal__content">
        <pre class="cosmo-docs-container">
        </pre>
    </div>
    <div class="cosmo-modal__button-bar">
        <button class="cosmo-button">Cancel</button>
        <button class="cosmo-button">Save changes</button>
    </div>
</div>

Information dialog

<div class="cosmo-modal is--information">
    <h1 class="cosmo-modal__title">Information dialog</h1>
    <div class="cosmo-modal__content">
        <pre class="cosmo-docs-container">
        </pre>
    </div>
    <div class="cosmo-modal__button-bar">
        <button class="cosmo-button">Cancel</button>
        <button class="cosmo-button">Save changes</button>
    </div>
</div>

Warning dialog

<div class="cosmo-modal is--warning">
    <h1 class="cosmo-modal__title">Warning dialog</h1>
    <div class="cosmo-modal__content">
        <pre class="cosmo-docs-container">
        </pre>
    </div>
    <div class="cosmo-modal__button-bar">
        <button class="cosmo-button">Cancel</button>
        <button class="cosmo-button">Save changes</button>
    </div>
</div>