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.

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.

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.

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.

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.

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.

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.

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