Mega Modal

Thunder Pack addon stack

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.

  • Build beautiful, full page modal overlays.
  • Select animation styles for loading and closing the modal overlay.
  • Style the modal and its controls to match your site.
  • Use either a button or an image as the trigger for opening your modal.

Example

Header

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.

Image

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.

Header

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.

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.

Header

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.

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.

Header

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.

Image

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.

Header

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.

Header

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.


Using Mega Modal

General

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.

Button Trigger

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 Trigger

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:

  • Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
  • Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.

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.

Modal

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.

Close Button

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.

Animation

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.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!