Modals

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 Content Modal

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 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.

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

View Small Modal


Below is an example of a medium modal using class .modal-md.

View Medium Modal

View Medium Modal


Below is an example of a large modal using class .modal-lg.

View Large Modal

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

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 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 Webpage 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

Open WordPress.tv Embed

Or, how about a video from Funny or Die.

Open Funny or Die Embed

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

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

Open Vimeo Video Modal

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.


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

Open Search Modal