Modal

Create versatile popover dialog windows into which you can insert your own modular content. We've made it easy to trigger the modal popup in a variety of different ways from a several different Foundry tools.

Examples

Below we've placed a few Headers mixed in with some Paragraphs. We've put a bit of descriptive text in those paragraphs relating to its accompanying Header.

Example One

This is a basic example using a Button as the Modal's trigger. We've kept the Modal's settings basic and used a Paragraph as its contents.

Example Two

Here we've used a Button Group to trigger two Modals. The Left button triggers Example One again. The Right button triggers a Example Two where we've customized the settings slightly.

Example Three

In this example we've used Foundry's Navigation Bar tool, and one of its Navigation Items specifically, to act as our Modal trigger for Example Three.

A wizard is never late, Frodo Baggins. Nor is he early; he arrives precisely when he means to.

In the latest version of Foundry we've combined the functionality of our previous Modal and Mega Modal tools, and gone further by adding several new features.

Additionally we've separated the Modal itself from the triggering element. This means we can trigger modals from Buttons, Navigation Items, Icons and much more. This gives you much greater control over your site design and layout.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Unique Modal ID

Each modal on your page must have a unique ID. This ID is used by the trigger(s) on your page to be able to link themselves to the Modal and make it appear when the visitor clicks on the trigger.

Note: Modals must have a trigger on the page in order to open the modal overlay. The primary example of a trigger is the Button tool.

Modal Title

Modal Title

This setting allows you to toggle the optional Modal Title on and off. The Modal Title appears at the top of the modal overlay when enabled.

If you opt to have a Modal Title included you will receive a field in the settings palette where you can type your Modal Title text.

Modal Footer

Footer Content

The Modal tool offers an optional footer section. This drop down allows you to choose between including a close button, which allows your visitor to close the modal, or a Drop Zone. The Drop Zone will add an area in Edit Mode for you to include other Foundry tools.

If you don't wish to have any Footer Content you can choose None from the list of Footer Content options. None is the default for this setting.

When opting to use the Footer to house a Close Button you'll be given controls for styling that button.

Padding

Title Padding

This setting allows you to choose from one of Foundry's preset padding options for the Title section of the Modal, or turn the padding off altogether.

Content Padding

This setting allows you to choose from one of Foundry's preset padding options for the main Content section of the Modal, or turn the padding off altogether.

If you need more granular control over the padding for the main Content section of the Modal you can set this option to None and then add a Spacing tool to the content area and adjust the padding there.

Footer Padding

This setting allows you to choose from one of Foundry's preset padding options for the Footer section of the Modal, or turn the padding off altogether.

If you need more granular control over the padding for the Footer section of the Modal you can set this option to None and then add a Spacing tool to the content area and adjust the padding there. Note this will only work if you're using the Footer's Drop Zone option.

Modal Size

Modal Size

You can choose from four different modal sizes here. This adjusts the width of the Modal itself.

We also offer a Full Screen Modal option further down in the settings for this tool.

Toggles

Vertically Center Modal

When enabled the modal itself will be centered vertically on the page when it is triggered. When disabled the Modal will appear toward the top of the browser window. This feature is enabled by default.

Allow ESC Key to Close Modal

Turning this option on enables the visitor to press the ESC key to close the Modal overlay.

Click Outside of Modal Closes It

This feature allows the Modal to close if the visitor clicks outside of the modal area. This provides yet another easy way to allow your visitors to close modal overlays.

Allow Modal Overflow Scrollable

If you have a lot of content within your Modal overlay, which can often occur when using the Full Screen Mode, you can enable this feature to allow that content to scroll.

Styling

Modal Title

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Modal Title text. You're also provided an option to choose a custom one-off color as well.

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Background of the Modal itself. You're also provided an option to choose a custom one-off color as well.

Close Button

Here you can choose to have the Close Button, found in the top right of the Modal, be either a Dark or Light color. This allows you to choose a contrasting color to that of your Background style.

Rounded Corners

Allows you to adjust the rounded corners of the modal popup using presets or custom values of your own. You can also choose None to disable the rounded corners on the modal popup altogether as well.

Full Screen Mode

Full Screen

This drop down allows you to choose when, if ever, the the Modal transitions to being Full Screen. Full Screen Modals can be useful when conveying a lot of information, or for display on smaller devices.

You able to choose to have the Modal be full screen sized below certain responsive breakpoints so that it can be normal for larger desktop displays and full screen for smaller devices. We've also included the ability to Always display the Modal in full screen format, as well as to opt to Never display it as full screen.

Shadow

Shadow

Used to add a decorative shadow to the text. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.