What are the differences between Lightbox and Modal box?

Question

I’m developing a system of login for a project and came to me the idea of putting the form in a "window to the center of the screen" superimposing the contents of the current screen.

Researching about this "window", I saw several references to lightbox and to the modal box. Hence the doubt arose:

What are the differences between lightbox and modal box?

And when I should use each of them?

Answer 1

I’ll give a slightly more nostalgic view, and that addresses other points of UX and use.

Have you ever heard of Gilette, Xerox, Chiclets? All are brands that have become synonymous with products Giletett = Razor blade, Xerox = Photo copy, Checlets = Chewing gum.

So it happened with the LightBox, that it was a Javascript library that became synonymous with product, because it was one of the first of its kind to emerge and the one that was most successful. Also, after that Lightbox team joined Facebook in 2012 they opened the code to other developers and from there appeared several other plugins sons of Lightbox like Colorbox, Magnific Popup, Slimbox or Thickbox.

Lightbox is a Javascript library that displays images and videos by filling the screen, and dimming out the Rest of the web page.

The original Javascript library was Written by Lokesh Dhakar. The term Lightbox may also refer to other similar Javascript Libraries. The technique Gained Widespread Popularity due to its simple and Elegant style.

The original Lightbox library used two Javascript Libraries, Prototype Javascript Framework and script.aculo.us, for its animations and Positioning. In April 2012, the plugin was rewritten for jQuery. The open-source Nature of Lightbox encouraged Developers to Modify and Fork the code, Resulting in plugins such as Colorbox, Magnific Popup, Slimbox or Thickbox.

Translation

Lightbox is a Javascript library that displays images and videos filling the screen and decreasing the rest of the web page.

The original Javascript library was written by Lokesh Dhakar. The term Lightbox may also refer to other similar Javascript libraries. The technique gained popularity due to its simple and elegant style.

The original Lightbox library used two Javascript libraries, Prototype Javascript Framework and script.aculo.us, for its animations and positioning. In April 2012, the plug-in was rewritten for jQuery. Lightbox’s open-source nature encouraged developers to modify and separate code, resulting in plugins such as Colorbox, Magnific Popup, Slimbox, or Thickbox.

SOURCE: https://en.wikipedia.org/wiki/Lightbox_(Javascript)

---

Lightbox use and UX

I don’t have exact sources for that. But from the point of view of the user and the Dev in the early days Lightbox was usually used to present media content such as images, and videos, photo galleries etc.

It was mostly used that the user could focus more on particular content, as when the Lightbox window opened it darkened the rest of the page and the user could view the image in a larger size and not have interference of the other elements around the image or video. It was a ruse to use in an element that wanted to give more prominence, and the user could see what clicked more "exclusive" and without visual interference of other things on the page.

---

Modal

About the Modal, I believe it has already been well explained in the other answer. Part of what I am going to say may be opinion, because I have no concrete sources. I believe that the term Modal has become popular with the Javascript Frameworks that have emerged since a while. They use a UX model similar to Lightbox, but you may consider that the purpose is different, such as paying attention to a mandatory content, a warning that the user must interact in some way obligatory. For his intention is to "block" the screen until something is done.

According to Nielsen Norman specifications Modais sane:

... "are presented as pop-ups or slide panels and restrict the user’s ability to interact with the content behind the modal, even if that content remains visible (and usually darkened). Windows or modal dialogues require users to interact with them before returning to what they were doing before. A modal restricts user input to its window until it is waived."

Source: https://www.nngroup.com/articles/modes/

A modal window is any type of window that is a child (secondary window) to a parent window and usurps control of the parent. It is commonly associated with a pop-up window of the Internet site in front of the original window. A user cannot press any controls or enter any information into the parent window (the original window that opened the modal) until the modal is closed. A modal window is commonly used when the author wishes to keep the user’s focus on modal information, as it is impossible for the user to interact with other windows of the same process.

Translated from: https://www.webopedia.com/TERM/M/modal_window.html

In short: From what I understand Lightbox should be used for presentation of media content such as images and videos. This type of content does not block other user actions, nor is it treated as knowledge content or mandatory interaction. Already the Modal blocks the user in a process, presents content of high relevance and that demand a normally mandatory interaction on the part of the user.

Answer 2

In essence the lightbox is a modal. The difference is that it is more obvious that it is a new layer that is operating, in general the background screen is dimmed to indicate that it no longer operates there, and also has the ability to click on that part and close the modal automatically, something that goes against the original idea of the modal, so they created a new name.

Some people consider this an advantage, and it is when the window has been opened just to highlight something, that it is common for you to want to get out of it easily and go back to the original. The modal should be used only when you want to quit when you finish your task, when there is an input in progress that needs to be completed, which is obviously a disadvantage if you want to see something outside of it in order to complete it. Nothing stops the modal being canceled, but for it to continue to be a modal it needs to be something more bureaucratic, not to let the person leave even unintentionally, it has to show that this is what it really wants, in fact a modal that does not allow to leave in any hypothesis is what gave bad reputation to the modals.

This is even more a question of UX than of HTML, this applies to what is not web (by what I perceive today many programmers even recognize the possibility of something other than for web to exist and be better in UX). Nor should there be a relationship with PHP which is a technology of backend.