Modal

Some plugins can be useful to be made into a utility, modals are an example of an interaction we can help add and configure by adding data attributes to a link or button.

The modal plugin is an example of a JavaScript plugin.

Getting started

Install the modal plugin

npm i https://github.com/htmlandbacon/govuk-prototype-modal-plugin

Then we turn any link into a modal

<a href="/delete-link"
    data-prototype-module="prototype-modal"
    data-modal-heading="Are you sure you want to delete this item?"
    data-modal-url="/delete-link-1">
        Delete example
</a>

We can also use the button component to make a modal.

{{
    govukButton({
        text: "Save and continue",
        attributes: {
        "data-prototype-module": "prototype-modal",
        "data-modal-heading": "Are you sure you want to save?",
        "data-modal-url": "/save-url",
        "data-modal-button": "Save all data"
        }
    })
}}

Options

To turn anything in a modal you need to add data-prototype-module="prototype-modal" to either a link or a button.

From here you can configure the following:

data-modal-heading, sets the value of a the h2 of the modal
data-modal-text, additional text added to the modal
data-modal-url, where the confirmation action takes you
data-modal-button, text of the confirmation action button
data-modal-button-classes, additional classes added to the confirmation button

As an example we could add data-modal-button-classes="govuk-button--warning" which will turn the confirmation button red.

Example configuration

The configure plugin guide gives an overview of how to configure the install for a plugin.

Below you can see the example of sharing the sass and Javascript as a module.

{
    "sass": [
      "/app/assets/sass/components/_dialog.scss"
    ],
    "scripts": [
      {
        "type": "module",
        "path": "/app/assets/javascripts/init.js"
      },
      {
        "type": "module",
        "path": "/app/assets/javascripts/components/dialog.js"
      }
    ]
}