Modal

Ready Added in 2.0.0

Create modal dialogs with different styles and transitions.

Usage

The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the gls-toggle attribute. An <a> element needs to be linked to the modal’s id. If you are using another element, like a button, just add the gls-toggle="target: #ID" attribute to target the id of the modal container.

Add the gls-modal attribute to a <div> element to create the modal container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling. Use the following classes to define the modal’s sections.

Class Description
.gls-modal-dialog Add this class to a child <div> element to create the dialog
.gls-modal-body Add this class to create padding between the modal and its content.
.gls-modal-title Add this class to a heading element to create the modal title.
.gls-modal-close Add this class to an <a> or <button> element to create a close button and enable its functionality. 
<!-- This is a button toggling the modal -->
<button gls-toggle="target: #my-id" type="button"></button>

<!-- This is the modal -->
<div gls-modal>
    <div class="gls-modal-dialog gls-modal-body">
        <h2 class="gls-modal-title"></h2>
        <button class="gls-modal-close" type="button"></button>
    </div>
</div>
  • Open 
  • <!-- This is a button toggling the modal -->
<button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #modal-example">Open</button>

<!-- This is an anchor toggling the modal -->
<a href="#modal-example" gls-toggle>Open</a>

<!-- This is the modal -->
<div id="modal-example" gls-modal>
    <div class="gls-modal-dialog gls-modal-body">
        <h2 class="gls-modal-title">Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="gls-text-right">
            <button class="gls-button gls-button-default gls-modal-close" type="button">Cancel</button>
            <button class="gls-button gls-button-primary" type="button">Save</button>
        </p>
    </div>
</div>

Guidelines

When to use

  • For single specific tasks related to a goal on the main page of the application
  • To help users determine information needed in their main workflow e.g. calculating a number, looking up a code

When to consider something else

  • When you need to display an error message consider using an alert on the page in which the error occurred.
  • When you need to display large amounts of information for multiple tasks consider using a dedicated page instead.

Close button

To create a close button, enable its functionality and add proper styling and positioning, add the .gls-modal-close-default class to an <a> or <button> element. To place the close button outside the modal, add the .gls-modal-close-outside class.

Add the gls-close attribute from the Close component, to apply a close icon.

<div>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-default" type="button" gls-close></button>
    </div>
</div>

<div>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-outside" type="button" gls-close></button>
    </div>
</div>

  • <!-- This is a button toggling the modal with the default close button -->
<button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #modal-close-default">Default</button>

<!-- This is the modal with the default close button -->
<div id="modal-close-default" gls-modal>
    <div class="gls-modal-dialog gls-modal-body">
        <button class="gls-modal-close-default" type="button" gls-close></button>
        <h2 class="gls-modal-title">Default</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<!-- This is a button toggling the modal with the outside close button -->
<button class="gls-button gls-button-default gls-margin-small-right" type="button" gls-toggle="target: #modal-close-outside">Outside</button>

<!-- This is the modal with the outside close button -->
<div id="modal-close-outside" gls-modal>
    <div class="gls-modal-dialog gls-modal-body">
        <button class="gls-modal-close-outside" type="button" gls-close></button>
        <h2 class="gls-modal-title">Outside</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Center modal

To vertically center the modal dialog, you can use the .gls-margin-auto-vertical class from the Margin component.

<div class="gls-flex-top" gls-modal>
    <div class="gls-modal-dialog gls-margin-auto-vertical"></div>
</div>
  • Open 
  • <a class="gls-button gls-button-default" href="#modal-center" gls-toggle>Open</a>

<div id="modal-center" class="gls-flex-top" gls-modal>
    <div class="gls-modal-dialog gls-modal-body gls-margin-auto-vertical">

        <button class="gls-modal-close-default" type="button" gls-close></button>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
</div>

Note .gls-flex-top on the modal container is needed to support IE 11.

To divide the modal into different content sections, use the following classes.

Class Description
.gls-modal-header Add this class to a <div> element to create the modal header.
.gls-modal-footer Add this class to a <div> element to create the modal footer. 
<div gls-modal>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-default" type="button" gls-close></button>
        <div class="gls-modal-header">
            <h2 class="gls-modal-title"></h2>
        </div>
        <div class="gls-modal-body"></div>
        <div class="gls-modal-footer"></div>
    </div>
</div>
  • Open 
  • <a class="gls-button gls-button-default" href="#modal-sections" gls-toggle>Open</a>

<div id="modal-sections" gls-modal>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-default" type="button" gls-close></button>
        <div class="gls-modal-header">
            <h2 class="gls-modal-title">Modal Title</h2>
        </div>
        <div class="gls-modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="gls-modal-footer gls-text-right">
            <button class="gls-button gls-button-default gls-modal-close" type="button">Cancel</button>
            <button class="gls-button gls-button-primary" type="button">Save</button>
        </div>
    </div>
</div>

Container modifier

Add the .gls-modal-container class to expand the modal dialog to the default Container width.

<div class="gls-modal-container" gls-modal>...</div>
  • Open 
  • <a class="gls-button gls-button-default" href="#modal-container" gls-toggle>Open</a>

<div id="modal-container" class="gls-modal-container" gls-modal>
    <div class="gls-modal-dialog gls-modal-body">
        <button class="gls-modal-close-default" type="button" gls-close></button>
        <h2 class="gls-modal-title">Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Full modifier

To create a modal, that fills the entire page, add the .gls-modal-full class. It is also recommended adding the .gls-modal-close-full class to the close button, so that it adapts its styling.

<div class="gls-modal-full" gls-modal>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-full gls-close-large" type="button" gls-close></button>
    </div>
</div>

Using the grid and width classes, you can create a nice, split fullscreen modal.

  • Open 
  • <a class="gls-button gls-button-default" href="#modal-full" gls-toggle>Open</a>

<div id="modal-full" class="gls-modal-full" gls-modal>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-full gls-close-large" type="button" gls-close></button>
        <div class="gls-grid-collapse gls-child-width-1-2@s gls-flex-middle" gls-grid>
            <div class="gls-background-cover" style="background-image: url('https://utahhealthcare.github.io/gloss-docs/images/photo.jpg');" gls-height-viewport></div>
            <div class="gls-padding-large">
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

Overflow

By default, the page will scroll with the modal, if its content exceeds the window height. To apply a scrollbar inside the modal, add the gls-overflow-auto attribute from the Utility component to the modal body.

<div gls-modal>
    <div class="gls-modal-dialog" gls-overflow-auto></div>
</div>
  • Open 
  • <a class="gls-button gls-button-default" href="#modal-overflow" gls-toggle>Open</a>

<div id="modal-overflow" gls-modal>
    <div class="gls-modal-dialog">

        <button class="gls-modal-close-default" type="button" gls-close></button>

        <div class="gls-modal-header">
            <h2 class="gls-modal-title">Headline</h2>
        </div>

        <div class="gls-modal-body" gls-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="gls-modal-footer gls-text-right">
            <button class="gls-button gls-button-default gls-modal-close" type="button">Cancel</button>
            <button class="gls-button gls-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

Media

If you want to display media, you should first check, if the Lightbox component doesn’t already offer everything you need. However, you can also use the modal to have more control over the markup to wrap your media in.

Note Use the gls-video attribute from the Video component to make sure videos are stopped when the modal is closed.

<div gls-modal>
    <div class="gls-modal-dialog gls-width-auto">
        <iframe src="" gls-video></iframe>
    </div>
</div>

  • Image Video YouTube Vimeo 

  •  <p gls-margin>
    <a class="gls-button gls-button-default" href="#modal-media-image" gls-toggle>Image</a>
    <a class="gls-button gls-button-default" href="#modal-media-video" gls-toggle>Video</a>
    <a class="gls-button gls-button-default" href="#modal-media-youtube" gls-toggle>YouTube</a>
    <a class="gls-button gls-button-default" href="#modal-media-vimeo" gls-toggle>Vimeo</a>
</p>

<div id="modal-media-image" class="gls-flex-top" gls-modal>
    <div class="gls-modal-dialog gls-width-auto gls-margin-auto-vertical">
        <button class="gls-modal-close-outside" type="button" gls-close></button>
        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
    </div>
</div>

<div id="modal-media-video" class="gls-flex-top" gls-modal>
    <div class="gls-modal-dialog gls-width-auto gls-margin-auto-vertical">
        <button class="gls-modal-close-outside" type="button" gls-close></button>
        <video width="1920" height="1080" controls playsinline gls-video>
            <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
            <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
        </video>
    </div>
</div>

<div id="modal-media-youtube" class="gls-flex-top" gls-modal>
    <div class="gls-modal-dialog gls-width-auto gls-margin-auto-vertical">
        <button class="gls-modal-close-outside" type="button" gls-close></button>
        <iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4" width="1920" height="1080" gls-video gls-responsive></iframe>
    </div>
</div>

<div id="modal-media-vimeo" class="gls-flex-top" gls-modal>
    <div class="gls-modal-dialog gls-width-auto gls-margin-auto-vertical">
        <button class="gls-modal-close-outside" type="button" gls-close></button>
        <iframe src="https://player.vimeo.com/video/1084537" width="1280" height="720" gls-video gls-responsive></iframe>
    </div>
</div>

Groups

You can group multiple modals by linking from one to the other and back. Use this to create multistep wizards inside your modals.

<div id="modal-group-1" gls-modal>
    <div class="gls-modal-dialog">
        <a href="#modal-group-2" gls-toggle>Next</a>
    </div>
</div>

<div id="modal-group-2" gls-modal>
    <div class="gls-modal-dialog">
        <a href="#modal-group-1" gls-toggle>Previous</a>
    </div>
</div>

  • Modal 1 Modal 2 

  • <p gls-margin>
    <a class="gls-button gls-button-default" href="#modal-group-1" gls-toggle>Modal 1</a>
    <a class="gls-button gls-button-default" href="#modal-group-2" gls-toggle>Modal 2</a>
</p>

<div id="modal-group-1" gls-modal>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-default" type="button" gls-close></button>
        <div class="gls-modal-header">
            <h2 class="gls-modal-title">Headline 1</h2>
        </div>
        <div class="gls-modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="gls-modal-footer gls-text-right">
            <button class="gls-button gls-button-default gls-modal-close" type="button">Cancel</button>
            <a href="#modal-group-2" class="gls-button gls-button-primary" gls-toggle>Next</a>
        </div>
    </div>
</div>

<div id="modal-group-2" gls-modal>
    <div class="gls-modal-dialog">
        <button class="gls-modal-close-default" type="button" gls-close></button>
        <div class="gls-modal-header">
            <h2 class="gls-modal-title">Headline 2</h2>
        </div>
        <div class="gls-modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="gls-modal-footer gls-text-right">
            <button class="gls-button gls-button-default gls-modal-close" type="button">Cancel</button>
            <a href="#modal-group-1" class="gls-button gls-button-primary" gls-toggle>Previous</a>
        </div>
    </div>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
esc-close Boolean true Close the modal when the Esc key is pressed.
bg-close Boolean true Close the modal when the background is clicked.
stack Boolean false Stack modals, when more than one is open. By default, the previous modal will be hidden.
container String true Define a target container via a selector to specify where the modal should be appended in the DOM. Setting it to false will prevent this behavior.
cls-page String 'gls-modal-page' Class to add to <html> when modal is active
cls-panel String 'gls-modal-dialog' Class of the element to be considered the panel of the modal
sel-close String '.gls-modal-close, .gls-modal-close-default, .gls-modal-close-outside, .gls-modal-close-full' CSS selector for all elements that should trigger the closing of the modal

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.modal(element, options);

Events

The following events will be triggered on elements with this component attached:

Name Description
beforeshow Fires before an item is shown.
show Fires after an item is shown.
shown Fires after the item’s show animation has completed.
beforehide Fires before an item is hidden.
hide Fires after an item’s hide animation has started.
hidden Fires after an item is hidden.

Methods

The following methods are available for the component:

Show

Gloss.modal(element).show();

Shows the Modal.

Hide

Gloss.modal(element).hide();

Hides the Modal.

The component comes with a number of prepared modal dialogs that you can use for user interaction. You can call the dialog directly from JavaScript and use callback functions to process the user input.

Code Description
Gloss.modal.alert('Gloss alert!') Show an alert box with one button.
Gloss.modal.confirm('Gloss confirm!') Show a confirm dialog with your message and two buttons.
Gloss.modal.prompt('Name:', 'Your name') Show a dialog asking for a text input.
Gloss.modal.dialog('<p>Gloss dialog!</p>'); Show dialog with any HTML content.

To process the user input, the modal uses a promise based interface which provides a then() function to register your callback functions. The Gloss.modal.dialog function however will return the modal itself.

Gloss.modal.confirm('Gloss confirm!').then(function() {
    console.log('Confirmed.')
}, function () {
    console.log('Rejected.')
});

The returned promise has a property dialog, which holds a reference to the modal itself. This lets you manipulate e.g. the markup of the modal’s element.

const modal = Gloss.modal.confirm('Gloss confirm!').dialog; // The modal component
const el = modal.$el; // The modal element

  • Dialog Alert Confirm Prompt 

  • <p gls-margin>

    <a id="js-modal-dialog" class="gls-button gls-button-default" href="#">Dialog</a>

    <a id="js-modal-alert" class="gls-button gls-button-default" href="#">Alert</a>

    <a id="js-modal-confirm" class="gls-button gls-button-default" href="#">Confirm</a>

    <a id="js-modal-prompt" class="gls-button gls-button-default" href="#">Prompt</a>

    <script>

       Gloss.util.on('#js-modal-dialog', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           Gloss.modal.dialog('<p class="gls-modal-body">Gloss dialog!</p>');
       });

       Gloss.util.on('#js-modal-alert', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           Gloss.modal.alert('Gloss alert!').then(function () {
               console.log('Alert closed.')
           });
       });

       Gloss.util.on('#js-modal-confirm', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           Gloss.modal.confirm('Gloss confirm!').then(function () {
               console.log('Confirmed.')
           }, function () {
               console.log('Rejected.')
           });
       });

       Gloss.util.on('#js-modal-prompt', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           Gloss.modal.prompt('Name:', 'Your name').then(function (name) {
               console.log('Prompted:', name)
           });
       });

    </script>

</p>