Modal windows allow content to be shown in a separate window without the user leaving the page. The linked content will show in a window with a shadowed background. Only the page content will be shown. The site header and sidebar are hidden.
To add a modal window…
- Add a link by clicking the Linkit icon in the wysiwyg toolbar.
- Enter or search for the page to link to.
- Click the options drop down.
- Enter "colorbox-node" into the classes field.
- Click "OK."
Form or Profile in a Modal Window
If the linked item is a form or profile it will show up in the modal window without the website header, footer or sidebar content. If there are any situations where specific formatting is needed for a form or profile please contact your AHC web support team.
Video in a Modal Window
To play a YouTube video in a modal window add the following in the HTML view of the wysiwyg.
<a class="colorbox-load video-thumb" href="//www.youtube.com/embed/youtube_id?width=640&height=380&iframe=true&autoplay=1&rel=0"><img src="http://img.youtube.com/vi/youtube_id/mqdefault.jpg" style="display: block;"></a>
YouTube ID: This is the ID number that YouTube assigns to each specific video. Replace both instances of youtube_id with the ID number of video you are linking to. The ID number instance in the img tag will use the videos thumbnail image that YouTube provides.
The following variables in the code can be changed to customize the video experience.
- Width and Height: This is the size of the video in the modal window. Change it to modify the video size.
- Autoplay: This determines if the video plays automatically or not. autoplay=1 means it will play automatically. autoplay=0 means the user has to click the play button.
- Related Videos: This determines if related videos are shown at the end of the video. rel=1 means related videos will be shown. rel=0 means they will not.