Modal box and modal image

Popup boxe in the standard version using JavaScript works quite well, per se, but the graphic expression is quite limited in options. The solution using modal boxes and modal images is really just a fancy way of combining a couple of DIVs with a bit of CSS and JavaScript, so it more a matter of being meticulous than technically difficult or advanced.

The HTML part of modal consists of two boxes and an button. The boxes are a DIV for controlling the background and a DIV inside this one, for showing the content. The button can be an ordinary button using the BUTTON tag, so that is what we will use in this example, but is may just as well be an image or a link. You just need someting for triggering that the DIVs are shown, i.e. an element to click on or a script that runs automatically when the page is shown.




As code it looks like this:


The button for closing the modal is a cross in the upper right corner in this example, which is one of the standard signs inherited from Windows. If you prefer a button with an OK, like an alert box, you can just do this instead.

If we start with the outer box (the green area shown above), which is the modal itself, then this needs to be invisible in the beginning, i.e. display must be none.

To avoid the box messing up the other content, you need to place it in another layer, which is done using z-index.

To give the illusion of a popup where the page content is moved to the background, and becomes inactive, even if the user scrolls, we specify a fixed position for the DIV, setting the distance to 0 from the top and left margin and set the height and width to 100%.

To prevent overflow for small screens, setting overflow to auto is an excellent idea.

The background needs af color. Black is the preferred color for many, but you choose, depending on personal taste and the color of the page. Using black on a black or very dark backgound wouldn't be a good idea, for example. To get the shadow effect instead of a massive slab, we use opacity, here it has been set to 0.5, and just like the color, it is something you adjust according to personal taste and what makes sense for the page. NOTE: If you use opacity, you can experience some problems here. Opacity is inherited in the elements, and cannot be overruled, so if the outer elements has an opacity:0.5, the inner element can only have opacity:0.5 as the heighest value. The only way to get around this, is by using rgba colors, which is rgb colors with an alpha channel (the one you also use for making invisible backgrounds on .gif and .png images).

Then the code looks like this:



The modal's content (the yellow box in the illustration above), i.e. the part that pops up as a window, somtaining text and/or image, is a DIV with a content like any other. The only thing you have to be aware of, is the placement, as the background locks the placement. In this example we center sideways and have an upper edge, 20% from the top of the window, using margin, but it may as well be at the bottom or the top. Other that that, it is just a matter of specifying borders, background colors, etc.

For the one we make here, the code looks like this:



The last item to be adressed is the cross to close the window. Here we make it grey as default, and when the ouse is over, it becomes black and the cursor changes changes to a hand, indicating a link.

For this, the code looks like this:



Now we just need the JavaScript.

When you search for solutions for modal boxes, you ofteh get a bigger JavaScript, with definitions of variables, functions and lots of other things. No reason to make it that complicates. You need ONCLICK twice and getElementById() once.

The first part is the button. When clicked, the DIV with the ID Modal if turned visible. That part looks like this:


The second part is the cross for Close, i.e. the SPAN containing the cross, where the DIV with the ID="Modal" is made invisible again. Like this:


The modal box is now ready.

Connecting the elements, it looks like this:

Now we have made a standard version of a modal box. Now we will make one that is a bit more pimped, as they call it these days.

If you want to look at the source code, feel free, but it isn't as important as what is happening. Compared the the standard box above, the following has been changed:

• The background color for the inner box bas been changed to transparent
• A gif animation with transparent background has been added
• The text has been placed in a box with rounded corners, crooked angles and white background
• The box containing text has been given a bit of blur effect using a white box-shadow
• The cross to close the box has been given a bit of neon effect using white text-shadow

Hvilket giver:


As long as you work with DIVs like this, you can do all sorts of effects and cool details, and it is only a matter of trying different things.