Open an overlay popup or modal window

There are several ways to display previously hidden content. You can use something like the accordion component in Fliplet Studio to do this without any code. You can also generate pop-up alerts, toasts and prompt messages with short snippets of code.

However, if you wanted to create an overlay with a custom layout then you can follow the example below.

Before we can open an overlay we first need to create one. The simplest way to do this is to use a container component and create the layout and content that you want inside it. For an overlay that covers the entire screen you’d want to position the container component “relative to the screen” and set the distances from the top, bottom, left and right edges to zero.

Once you have the overlay container you wish to hide, open up the Developer Options and locate it in the HTML. It should look something like this:

<fl-container>
<!-- My content -->
</fl-container>

So we can select it in our code, we need to add a custom class to the container. You can do this by adding class="my-class-name" in the first <fl-container ... > tag.

<fl-container class="my-class-name">
<!-- My content -->
</fl-container>

Then in the CSS you can create two class styles (one to hide the overlay and one to show it).

;

.my-class-name {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.my-class-name.display {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

The first CSS class (“.my-class-name”) above sets the opacity of the overlay to zero (transparent) and moves it to the right (in the x-direction) by 100% of it’s width. We also set a transition duration of 0.2 seconds for all animations.

The second CSS class (“.my-class-name.display”) reveals the overlay. It sets the opacity to 1 (so that it’s visible) and moves it back to its original position.

Finally we add some JavaScript to flip between these two style classes (by adding and removing the “display” class) and some html buttons so that we can press something to trigger the JavaScript.

<fl-button class="open-overlay-button"></fl-button>

<fl-container class="my-class-name">
  <!-- My content -->

  <fl-button class="close-overlay-button"></fl-button>
</fl-container>

$(document)
  .on('click', '.open-overlay-button', function () {
    $('.my-class-name').addClass('display');
  })
  .on('click', '.close-overlay-button', function () {
    $('.my-class-name').removeClass('display');
  });