The Modal stack allows you to create popover dialog windows into which you can insert your own modular content using other Foundry stacks.
Click the button below labeled "Open Example Modal" to trigger the overlay dialog and reveal the popup modal’s content.
Allows you to choose between using a Button or an Image as the trigger that causes your Modal to display when clicked.
Allows you to customize the text for the button which is used to trigger the modal overlay.
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Modal Button.
Font Weight v2
Use this setting to adjust the font weight of your Modal Button's text when you've assigned it a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.
Set the size of your button. Choose from Small, Standard or Large.
Set the color of the button to match your site. Use one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.
You can choose to align the Modal’s trigger button to the left, center or right.
Enable to make the Modal button span the entire width of its parent stack. The button’s width is flexible when enabled and will size down to fit the available space.
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.
When enabled you will be given the option of choosing an icon to be placed alongside your text within the Modal's Button trigger.
Icon Alignment v2
When the Icon feature is enabled you will be able to choose whether your icon appears on the left- or right-hand side of your Modal's Button.
This drop zone allows you to insert an image that will be used for triggering your Modal. This feature is only operational when you've selected Image as your Trigger Type.
Set your trigger image's ALT tag text here.
Enable Close X
Include a small X in the upper right corner of the modal dialog that allows the visitor to close the modal.
Choose from three different modal dialog sizes. Small, Standard and Large.
Choose whether to add a header or footer to your modal dialog popup. The header can contain custom text. The footer can contain either text or a button that allows the visitor to close the modal. You can also customize the close button’s text as well as its alignment.
Allows you to customize the Close Button's label text for when the Footer section of the Modal is enabled.
When the Close button is enabled within the Footer this feature allows you to align said button to the left, center or right.
Center Modal Vertically v2
Enabling this feature will center your Modal vertically within the browser window when it is opened.
Allows you to set the justification of the Modal’s header text. You can set the alignment to Left, Center or Right.
Enables a simple animation that makes the modal dialog slide down from the top of the browser window.
Allows you to collapse the drop zone for the modal content in Edit Mode, freeing up space to more easily work on building your pages and rearranging your stacks within them.
Some of the Modal stacks' styling options are customizable within the Foundry Control Center stack. This allows each modal on the page to share the same look and feel.