Website Modal Examples

Examples and instructions for using the modal features on the website for content and video popups.

Modals

Create hash links that start with #modal-[pid], #modal-lg-[pid], and #modal-xl-[pid] where [pid] is a modal (custom post type) post id.

#modal-8046, #modal-8058, #modal-8038, #modal-8031
#modal-lg-8046, #modal-lg-8058, #modal-lg-8038, #modal-lg-8031
#modal-xl-8046, #modal-xl-8058, #modal-xl-8038, #modal-xl-8031

Clean modals

Create hash links that start with #modalc-[pid], #modalc-lg-[pid], and #modalc-xl-[pid] where [pid] is a modal (custom post type) post id. *Notice the slight modification on the link. #modal to #modalc (c for clean).

#modalc-8046, #modalc-8058, #modalc-8038, #modalc-8031
#modalc-lg-8046, #modalc-lg-8058, #modalc-lg-8038, #modalc-lg-8031
#modalc-xl-8046, #modalc-xl-8058, #modalc-xl-8038, #modalc-xl-8031

Takeover

Create hash links that start with #takeover-[pid], where [pid] is a modal (custom post type) post id

#takeover-8087, #takeover-8138

* Takeover background color when editing a modal post, at the bottom of the page there is a takeover background color selection option. This allows you to set a background color (for the entire takeover) that is used whenever the modal is called as a takeover modal

Videos

Open on click by using hash links like #youtube-[vid] and #vimeo-[vid] as the href value.

Youtube modal (#youtube-5HDtEu7Xoks)
Vimeo modal (#vimeo-347119375)

Open on page load by adding the #youtubel-[vid] or #vimeo.-[vid] to external links. **Notice the slight modification on the link. #youtube to #youtubel and #vimeo to #vimeol (l for load)

https://www.elevatedemand.com/#youtubel-5HDtEu7Xoks
**Notice the slight modification on the link. #youtube to #youtubel (l for load) https://www.elevatedemand.com/#vimeo.-347119375
**Notice the slight modification on the link. #vimeo to #vimeol (l for load)

Auto Popups

Popup load delay 5sec

Popup exit (after 5sec)

Popup scroll 20%