The HTML part of modal box/image
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.
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.
The CSS part of modal box/image
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).
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 first part is the button. When clicked, the DIV with the ID Modal if turned visible. That part looks like this: