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. Yup! in this tutorial, we’ll build a simple modal popup box that will reveal on a button click.
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.
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.
Trigger:
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.
Style Options
- 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 are a powerful tool that can be used to display a variety of content to your users. They can be used to display notifications, and alerts. Spectra’s modal block makes it easy to create and customize modal blocks, and it includes a variety of features that will help you create great user experiences.