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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Turning this option on enables the visitor to press the ESC key to close the Modal overlay.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This field allows you to replace the default HTML Comment with your own text.
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.