Popup window on the site (modal window)

When I was just learning the basics of development, I used to make a popup window manually. Yes, yes – instead of finding some ready-made solution, I did this thankless task 🤪. It seemed to me that there was nothing particularly complicated about it. But, only after some time of working on this issue, I began to realize that to do it is not so easy. And in the process of using it, when all sorts of inconvenient nuances came up, it started to frustrate me. The funny thing is that I had a ready-made solution at hand and I had already used it on the same site. And, as it turned out, I wasn’t using it to its full potential. I thought that fancybox was a library exclusively for opening images. What was my surprise to find out that it could be used to open videos, text boxes, and google map. That’s what happens when you are too lazy to read documentation 😅.

Actually, a brief review on this library is what I would like to do here.

Meet Fancybox

Fancybox. So what is it and what is it eaten with? Immediately spoiler – it is not eaten 🤡 . Fancybox is one of the most powerful libraries that helps you make a popup window with minimal effort. Such an abundance of built-in features in other libraries I haven’t come across, anyway. The main advantages of the plugin can be found here: https://fancyapps.com/fancybox/#key-features . For me personally, I highlighted:

• It has a large number of options that help to customize the popup for any design.
• Ability to embed different elements: images, videos, maps, inline content, iframes and other html content.
• Jquery is not required.

Getting started

We can connect the library using cdn:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

Or we can download an archive where we take files from the dist folder, place them in the project and connect them locally:

<link rel="stylesheet" href="fancybox.css" />
<script src="fancybox.umd.js"></script>

Or we can use a package manager:

# Usage with NPM
$ npm install --save @fancyapps/ui

# and with Yarn
$ yarn add @fancyapps/ui

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

Launch

First of all, let’s create an element, when you click on it, the popup will appear. Let it be a link:

<a href="image-big.jpeg" data-fancybox>
  <img src="image.jpeg" />
</a>

In the tag <a> in the attribute href put a link to the image + add the attribute data-fancybox

Add Fancybox.bind() to the script file to make it work.

For a simple launch, this is more than enough.

We can also group our elements into a gallery. To do this, in the value of the attribute data-fancybox add the name of the gallery, by which the plugin will group the elements. For example data-fancybox="my-gallery"

<a href="image1-big.jpeg" data-fancybox="my-gallery">
  <img src="image1.jpeg" />
</a>

<a href="image2-big.jpeg" data-fancybox="my-gallery">
  <img src="image2.jpeg" />
</a>

We can also use the data-caption attribute to add a small description to the image:

<a href="image-big.jpeg" data-fancybox data-caption="Hello fancybox">
  <img src="image.jpeg" />
</a>

You don’t have to use only the <a> tag. We can use any other html element. We just need to add data-fancybox and data-src attribute with a link to the image.

What else can you shove into a pop-up window?

We can open google maps:

• Open google map;
• Find the desired settlement;
• Copy the browser link;
• Paste it into the href or data-src of the element;

Map in modal

We can open an iframe:

• Insert the link into the element’s href or data-src;
• Add the attribute data-type="iframe" to the element

Iframe in modal

Video:

Here we can use both just a link to the file and links to resources such as Youtube.

• Insert the link in the element’s href or data-src;

Video in modal

Html block:

• For this purpose we can hide the element on the page using css (display: none) and add id attribute to it, for example id="testPopup".
• We insert this id into the href or data-src of the element (#testPopup);

Html block in modal

And yes, if you’ve opened the popup above, you’ll have noticed a button that can be clicked to close our popup. Just add the data-fancybox-close attribute to this element

Conclusions

Everything I have shown above is enough to make the developer’s hard work a little easier. However, you should keep in mind that this is just a superficial look at the plugin. It also has a large number of customizable parameters, thanks to which you can do more flexible and fine-tuning of content. So the sequel follows….