Alert popup on web

Image 1 of 2

An alert message is one of several ways to show a message to a user. It’s worth noting that you can also use overlays, toast pop-ups and confirmation messages to do similar things (but the style and information they display is a little different). An alert message is used as a quick way to provide a user with information and require them to click ‘OK’ to acknowledge they’ve read the message.

To generate an alert message in the default style of the browser or mobile device we can use the code below. Alert messages display a simple message and an ‘OK’ button automatically.

Fliplet.UI.Actions({
  title: 'This is an alert message',
  labels: [
    {
      label: 'Ok'
    }
  ],
  cancel: false
});

The example below fires the alert message when a button is pressed. To do this we add a button component to our app but need to give that button a class so that we can connect it to the JavaScript that fires the alert.

<fl-button class="open-alert"></fl-button>
$(document)
  .on('click', '.open-alert', function () {
    Fliplet.UI.Actions({
      title: 'This is an alert message',
      labels: [
        {
          label: 'Ok'
        }
      ],
      cancel: false
    });
  });