Build a lightweight, full-screen modal window that houses your content in a customizable overlay. Great for when you need to make sure you have your visitor’s full attention.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Remove Base Margin
This setting lets you disable the preset standard spacing that is applied to the bottom of the stack.
Trigger Type
Allows you to select between using a button or an image as the element which triggers your modal overlay.
Trigger Alignment
Allows you to align your trigger to the left, center or right.
Open Label
Lets you customize the text which will be placed onto your button trigger if you select Button as your trigger type.
Size
Choose the size of your button. You can opt for a Small, Standard or Large button size.
Style
Set the color of the button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.
Block Button
Enable to make the 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.
Image
Drag and drop the image you wish to use for your trigger into this image well.
Image Style
Choose from four different image styles: Standard, Rounded, Circular, Thumbnail.
Image Sizing
This feature allows you to choose how Foundry displays your image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:
Alt. Tag.
Provides you a way to add an Alt. Tag to your image. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.
Background Style
Allows you to choose where you’d like to use a solid color or a gradient for the backdrop of the modal overlay. Depending of which you choose you’ll be presented with the appropriate color pickers.
Top Padding
Allows you to customize the amount of padding at the top of the Mega Modal overlay. This can be adjusted for each of the three breakpoints.
Type
Allows you to choose between a fixed-width or fluid main content area for your modal overlay.
Max-Width
When using the fixed-width mode this setting allows you to choose the maximum width for your responsive content area within the Mega Modal stack.
Size
Allows you to set the size of the Close button, which the visitor uses to close the modal overlay. You can set a different size at each of the three breakpoints.
Alignment
Choose whether you’d like the Close button to be located at the left, center or right of the modal overlay.
Close Icon
Use a drop down menu to select from a large assortment of icons to choose which you’d like to use for your Close button.
Icon Size
Set the size of the actual Close button icon at each of the three breakpoints.
Normal
Set the color of the Close button’s background and icon.
Hover
Set the color of the Close button’s background and icon when the visitor hovers over the button.
Open & Close Animation
Choose an animation style for the opening and closing of the modal overlay. You can set both to be the same or choose different animations for each.
Duration
The amount of time, in seconds, that it takes for the animation to complete.