The Modal Block allows you to create interactive popup windows that display content when triggered by user actions. Use this block to develop engaging popups for promotions, forms, announcements, etc.
Prerequisite:
Active installation of Magazine Blocks Free or Pro.Enable Modal Block #
To use the Modal block from Magazine Blocks, ensure you have enabled it. So, navigate to Magazine Blocks > Blocks. Now, look for the block and check if it’s enabled. If not, toggle to enable the block.
Add the Modal Block to the Page or Post #
- Go to the page or post where you want to add the Modal block.
- Next, click on the [+] icon and search for the Modal block under Magazine Blocks.
- Drag and drop the Model block to the page.
Now, a new button will appear on your editor, which you can customize. You can now add text to the button and content to show on the popup.
For example, add a View Video Tutorial button and embed the YouTube video on the popup.
As shown in the example above, we have added a video to the popup window. Similarly, you can add other content, like newsletter sign-up forms, announcements, contact forms, login prompts, and more.
Customize the Modal Block #
Magazine Blocks allows you to customize the trigger you created using the Modal block easily. The trigger is the element users click to open the Modal. In our example, it is “View Video Tutorial“.
Now, click on the button that was added through Modal block, and you’ll see the settings on the right side. The plugin offers three settings: General, Style, and Advanced.
Let’s look at them in detail:
General #
The General tab controls how your modal behaves, what triggers it, and its core structure. Here’s what each option does:
Trigger
You can choose the trigger type, such as Button, Icon, Image, or Text. For each, you’ll get an additional customization option.
Let’s see each trigger type in detail:
Button
If you select Button, it adds a button on your page or post as a trigger for the Modal block.
Button Type: The plugin offers different button types to choose from: background color, without background color, and so on.
Size: Once you select the button type, you can also choose between the button size: small, medium, or large.
Enable Icon: You can also add an icon to the button by enabling this option.
By default, it adds an arrow, but you can choose from other options by hovering on the arrow icon. A new interface will show you all the available option, you can choose and click on Insert.
Next, you have the following option for icon settings:
- Icon Position: You can position the icon before or after the text.
- Icon Size: You can change the size of the icon used on your trigger button.
- Icon Gap: You can change the gap between the icon and the text on the button.
Content Size: You can change the trigger button’s width and height from here. If the popup height is too small or big, you can manage it through Popup Height.
Close Button: Once the popup is loaded on your interface, you’ll see the close button in the top right corner, as shown in the image below.
You can choose to change the icon to be used as a close button for the popup, just like we changed the icon in the above section.
- Icon Position: Also you can position the icon at the top left or top right of the popup or window.
- Icon Size: From here, you can change the size of the icon.
- Icon Color: Choose the icon color if you don’t want to settle for the default color, grey.
Icon
The next trigger option is an icon; you can use an icon instead of a button. Simply select Icon and you’ll see the icon on the left interface.
If you want to change the icon (an arrow by default), hover over the icon field and click the “change icon” text, as we did above. A set of icons appears on your screen, so choose one and click on Insert.
The other setting options are similar to button settings, i.e., Content Size and Close Button.
Image
You may also add the image as a trigger. Select the option to add a custom image as your trigger.
Similarly, you can customize the content size and close button.
Text
The last trigger type is Text. You can add text as your trigger and customize the content size and close button for this trigger.
Style #
The Style Settings tab lets you customize the visual appearance of your modal, trigger, and popup to match your website’s branding. Here’s what you can do:
- Properties: From here, you can align trigger placement as Left, Center, and Right.
- Button: From here, you can change the trigger’s text color, background color, and typography.
- Modal: You can customize the modal from here. Customize padding, background color, border type, and border radius for the modal from here.
- Popup: You can change the background color of the popup form here.
Advanced #
The Advanced Settings tab offers granular control over the modal’s technical behavior, responsiveness, and custom code integration.
Spacing: You can adjust the modal’s margins and padding for precise positioning from here. Click on the Spacing and it’ll give you the option to change:
- Block Margin: Adds space outside the modal (e.g., to avoid overlapping with headers/footers).
- Block Padding: Adds space inside the modal (e.g., to prevent text from touching the edges).
Z-index: It allows you to set the priority of the Modal block according to the site requirement. You can decide which element appears on top when two items overlap (like layers in a photo editor). You can increase or decrease the z-index using this option.
Responsive condition: You can control where the modal appears based on device type. You can enable or disable the block on various desktop, tablet, and mobile screen sizes.
Advanced: This option is highly beneficial for developers or advanced users comfortable with code. You can add CSS ID, CSS Class, and Block HTML to the modal block from here.
- CSS ID: Assign a unique ID to target this modal block with custom CSS/JavaScript. Once you have set the ID, you can write the CSS Code to style the block using that specific ID.
- Additional CSS Class(es): It allows you to add reusable CSS classes to style this modal.
- Block HTML: You can change the HTML container type for better SEO/accessibility from here.
Click Save to save the changes made on the page or the post.
Frontend View #
Our example shows how the final frontend view looks after using the Modal Block on our page.
Similarly, you can create a custom Modal block on your website and display content on popup window.
