This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Modal component handles the Bootstrap Modal component.

The modal component is defined by the following Yaml code:

            id: myModal
            title: Modal title
            #from_file: modal.markdown
            body: A simple modal text
                    type: primary
                    caption: Save changes
                    #    id: myButton
                    #    class: something-cool
                    #type: default
                    caption: Close
                    closes: true

This code must be added to the page where you need to display the component.

id property

The id mandatory property defines the same HTML property for the modal. If you need more than one modal on the same page, be sure to add a different id for each modal you define.

title property

The title mandatory property defines the modal title.

from_file property [optional]

The from_file optional property defines the file which contains the contents for each modal element. This file must be added under the page where the component is displayed and it is structured as follows:

[SECTION body]

### Modal
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.


This file must contain a single section called body.

If you need to add more modals and you want to define for each modal a markdown content, you must add a markdown file for all the modals you want to handle.

body property [optional]

The body property defines a simple content for the modal body. When you define both the body and the from_file properties, the latter one is ignored.

buttons property

The buttons property is an array which defines one or more buttons displayed in the modal component.

Render the modal component

Add the following code to the template where you need to render the modal component:

{{ gravstrap.modal1 }}

To show the modal window, you must add an additional component, for example you could add a button which will open the modal when a user clicks on it:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal

Be sure the id specified in the alert definition is the same you use in your button.

Next Post Previous Post