Modal
All of our modal functionality extends the Magnific Popup jQuery plugin. So in order for anything in this article to work, you must include the Magnific Popup script in your website.
As you browse thise article, you'll see that we've taken care of all the custom JavaScript by binding Magnific Popup to CSS classes used in Front Street's HTML markup.
Content Modals
Front Street extends Magnific Popup, allowing you to easily open up niceley styled inline content in modal windows. Below is a basic example.
View Medium Modal
Now, in the following sections we'll break down the various parts that make all this work and discuss the different options.
Modal Linking
A content modal element and <a>
tag are linked together by a unique ID. Your <a>
tag will link to the ID of the modal element and will need the class fs-modal-content-link
to invoke the JavaScript.
Open Modal
Modal Headers
If you want your modal to have a header, you can wrap any heading in a .modal-header
element like the following.
Modal Header
Modal Content
To get matching padding and styling within your modal window's content, place it within an element with class modal-content
like the following.
Modal Closing
If you add one of the framework's close buttons within your header, it'll automatically get styled and placed in the top right corner. You can use any of the four sizes, as well. The only thing to note is that you must add the class fs-modal-close
to invoke the JavaScript required for closing the modal.
Modal Header
However, adding fs-modal-close
to any link within your modal will invoke the JavaScript needed to close the modal. Below is a basic example, where we're using a standard button to close the modal window.
Open Modal With Alternate Button
Open Modal With Alternate Button
Modal Sizes
Content modals can be implemented in three different sizes by adding classes modal-sm
, modal-md
, or modal-lg
to the .fs-content-modal
element. Note that there is no default size and so you must always use one of these sizing classes.
In viewing the following three sizes, you can see how we've incorporated various sized headings and close buttons to match the size of the modal windows, but you can mix this around and include whichever of these elements you want. — In other words, the size of these inner headings and close buttons are not directly tied to the size of the modal window.
Below is an example of a small modal using class .modal-sm
.
View Small Modal
Below is an example of a medium modal using class .modal-md
.
View Medium Modal
Below is an example of a large modal using class .modal-lg
.
View Large Modal
Naked Modals
And of course most of the different elements we've discussed are optional. If you just want a bare-bones content modal that you can style yourself, here's an example of that.
Open Naked Content Modal
Image Modals
To open an image modal, you need to link to an image URL and add class fs-image-modal-link
to that link. Note that the title
attribute of the link will be used as the title displayed below the image modal.
Open Image
Video Modals
Iframe content generally consists of video and other content loaded from external URLs. For all iframe-based elements, you need to link to the desired URL and add class fs-iframe-modal-link
to the link. And similary to images, whatever you place in the title
attribute of the link will display as a title below the iframe modal.
Below is a basic example showing how any URL can be opened up within an iframe modal.
Open YouTube Webpage Modal
And of course anything that would more typically use an iframe, like embedding a video for example works great, too. The following is an example of linking to the embed URL for a video on WordPress.tv.
Open WordPress.tv Embed
Or, how about a video from Funny or Die.
Open Funny or Die Embed
When linking to a YouTube video, there is some special treatment that Magnific Popup gives us. Instead of linking to the embed URL, we can just link directly to the YouTube video page — i.e. http://youtube.com/watch?v={Video ID}
. This also allows for a smoother experience by auto-playing the video when the modal opens.
Open YouTube Video Modal
And similarly to YouTube, we can do the same thing for Vimeo by linking to a standard Vimeo page like https://vimeo.com/{Video ID}
.
Open Vimeo Video Modal
Gallery Modals
Galleries are used to group image and iframe modal elements together. This way, when one element in the gallery is open, the user can then navigate through the rest of the elements without closing the modal window.
To group a set of modal elements into a gallery, simply wrap them in an element with class fs-modal-gallery
. Below is a mix of image and iframe modal links grouped together this way into a gallery.
Open Item #1 (image)
Open Item #2 (image)
Open Item #3 (image)
Open Item #4 (YouTube video)
Open Item #5 (Vimeo video)
Note: To create a styled gallery of thumbnails, which could be combined with this modal functionality, see here.
Search Modal
The search modal allows you to hide a nice big search field for your website. Link to the search modal however you want — via a button, text link, icon, etc.
Below is an example of how this works. We've got a <form>
with an <input type="search">
. field within. On the form, we've added class fs-search-modal
and ID search
which we can reference from our link.
To link to the search modal, create any kind of link with class fs-search-modal-link
and then link to the ID you've given to your <form>
.
Open Search Modal