EverWeb Widgets
The modal window has a responsive width with a maximum with setting. The height can either be fixed which allows the overflow to scroll or set to auto when there is a small amount of content which won't overflow the viewport when the modal is viewed on a mobile phone.
Options
All the items in the modal are optional and include a heading, an image with alt text, a text block and a CTA style link tab.
This item uses two widgets - one to create the image header and the other the modal window The modal is opened by clicking/tapping the centered info button.
The responsive header has a full size background image which can be set to a fixed height. There is the option to set a different height on mobile phones or both can be set to viewport height.
Images
The widget loads different sizes of images for each device type - computer, tablet and phone - for increased efficiency and faster download times on touch devices.
Header
The overlay header has an h1 heading and an optional logo and has adjustable height. The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It can be adjusted for font size, color, style and weight and letter spacing. The background color has an opacity slider.
Logo
The optional logo is positioned top left and has controls for adjusting its size and its position relative to the top and left.
Info Button
The centered info button has options for changing the color, setting the hover color and showing a title on hover when viewed on computers.
h2 Heading
The optional h2 heading overlays the bottom of the image. The text is centered and it inherits the font family, color and background color from the main heading. The font size is adjustable computer/tablet and there is a separate mobile setting.
The modal is a separate widget which is placed below the header on the EverWeb design canvas. It has responsive width with a maximum width setting.
The height can either be "auto" or fixed. With auto height, the modal window will increase in height as the width is reduced when viewed on narrower browser or device window widths. Using a fixed height is better in most cases so that any overflow content will scroll within the modal and be prevented from overflowing the viewport on mobile phones..
Options
The modal window has options for a heading, a centered image with adjustable padding and alt text, a text block and a CTA style link tab. The link tab can be configured as an internal or external link and open in a new window if required.
The container has options for adding a border with controls for border width, color and radius.
Show/Hide
The widget is visible on the EverWeb design canvas and the height can be set to view all the content while adding and styling it.
Prior to publishing, the fixed height should be set if applicable and the "Hide Modal" box checked.
The widget will still be seen in EverWeb but will be hidden on the published page.