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
Using Modal block in Spectra, you can create a simple call-to-action modal window that popup and overlay the page at specific triggers. Popups are designed to focus a user’s attention once they have taken an action.
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
You can create a simple call-to-action modal window that popup and overlays the page at specific triggers.
- 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.
- Also, you can set the Modal popup width and height as per your choice.
- You can set the icon and icon position for the closing button.
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.
