/ Documentation /Blocks/Modal Block

Modal Block

The use of modal popups is very common in web designing nowadays. Whether we are alerting the user or displaying an important message, we use a Modal Popup box.

Generally, we need to use a jQuery plugin in order to create a modal dialog box. But, with Spectra, you can create a simple modal box with ease. In this help document, we’ll build a simple modal popup box that will reveal on a button click.

What is the use of Modal block in Spectra

A pop-up, left off canvas, and right off canvas are all types of modal blocks. A modal block is a type of interactive element that appears on top of the rest of the page, blocking the user’s view of the page until the modal is closed.

  • Pop-up: A pop-up is a modal block that appears in the center of the screen. Pop-ups are often used to display notifications, alerts, or forms.
  • Left off canvas: A left off canvas modal block appears from the left side of the screen. Left off canvas modal blocks are often used to display navigation menus or sidebars.
  • Right off canvas: A right off canvas modal block appears from the right side of the screen. Right off canvas modal blocks are often used to display similar content as left off canvas modal blocks.

The type of modal block that you use will depend on the content that you want to display and the user experience that you want to create.

For example, if you want to display a notification that is important for the user to see, you might use a pop-up. If you want to display a navigation menu that the user can access from anywhere on the page, you might use a left-off canvas modal block.

How to add the Modal Block?

To insert the Modal block, click the Toggle block inserter + icon and look for the Modal block.

Modal Block

What are the Modal Block General Settings

Modal Content:

There are three ways to open the modal: as a pop-up, left off canvas, or right off canvas. You can select the modal type from the dropdown menu. Once you have selected the modal type, you can choose the appear effect, either scale or slide in.


Under the General Settings tab, you can select the trigger from 4 different options Button, Icon, Text, and Image. You can set the alignment of the trigger to left, center, right, and full width.

Modal Width:

You can set the Modal popup width, height as per your choice.

Close Button:

You can set the icon and icon position for the closing button.

There are two ways to close a modal: by pressing the Esc key or by clicking on the overlay. The Esc key is a keyboard shortcut that can be used to close any modal. The overlay is the background layer that covers the rest of the page when the modal is open. Clicking on the overlay will also close the modal.

How to Style a Modal Block in Spectra

  • Under the style tab, you can see the typography, color, and background color options for the Trigger.
  • You can set the Border color and width for the trigger.
  • You can set the icon size and color for the closing button.
  • Also, you can set the background color, and gradient and even add a background image for the popup box.

In conclusion, modal blocks can be used to display a variety of content to your users. They can be used to display notifications, and alerts.

We trust this document has been helpful to you. If you have any questions or need further assistance, please don’t hesitate to leave a comment below. Your feedback is valuable to us!

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

%title %title
On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.