⬅ Back

how to make a modal window-instruction

1. Understanding the Structure of a Modal Window

   First of all, it is very important to understand that the main content of this page is this text. In our case, the main content is the instruction explaining how to create a modal window.

   Another important part is the modal overlay and the modal window. The modal overlay is a div, and inside the modal overlay there is another div called modal. This modal div is our modal window.

   Now let’s explain the difference between the overlay and the modal window. Try to imagine the main text and the modal window on the screen. You can see the main text behind the modal window, so it may seem that the text is directly behind it, but this is only an illusion.

   Behind the modal window, there is actually the modal overlay, which usually has some opacity. Sometimes the modal overlay has a different color, but a semi-transparent dark overlay is the most common choice.

   So, it is very important to understand the order of the elements:

   [ Top layer ] Modal window
   [ Middle layer ] Modal overlay
   [ Bottom layer ] Main content

   Diagram:
   
   Modal window
   ↓
   Modal overlay
   ↓
   Main content

2. Creating the HTML Structure

   Next, create the HTML structure for the modal window under the </main> tag. First, create a div with the class modal-overlay. Then, inside it, create another div with the class modal.

   <div class="modal-overlay">
       <div class="modal"></div>
   </div>

   Inside the modal, we create a paragraph with text called Modal content. Later, we will remove this text and paste the complete HTML code with all scripts into this paragraph.

   So, on the main page, we will have text explaining how to make a modal window, and inside the modal window, we will have the code visible in the browser that is used on this page.

   It looks like this:

   <div class="modal-overlay">
       <div class="modal">
           <p>Modal content</p>
       </div>
   </div>

3. Styling the Modal Overlay

   Now we need to style the modal-overlay, so we must create some CSS code. You can write it in a CSS file or, like I do here, directly in the HTML file.

   The modal-overlay should be positioned properly, and for that we will use position: fixed. A fixed position works relative to the viewport, so if we set top: 0 and left: 0, the overlay will start in the top-left corner of the screen.

   At the beginning, I will use background-color: orangered. In this way, we can clearly see in the browser where the overlay is and how it looks.

   Now we need the modal-overlay to cover the whole screen. We can do that with width: 100% and height: 100%. After that, the modal overlay will cover the entire screen with the orangered color.

   We also need to set a high z-index, for example 999. It should always stay above the main content. Perhaps later we will create another element with position: absolute, but the modal overlay should still appear on top.

   Here is the CSS code:

   .modal-overlay {
       background-color: orangered;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 999;
   }

   Here is screenshot

   

4. Positioning the Modal Window

   Now we need to position the modal window. For this, we create CSS for .modal. We want to place the window in the center of the screen, so we add justify-content: center and align-items: center to .modal-overlay. This makes the modal window appear in the center.

   We also need to add display: flex to .modal-overlay, because justify-content and align-items only work with flexbox.

   Here is the code:

   .modal-overlay {
       background-color: orangered;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 999;
       justify-content: center;
       align-items: center;
       display: flex;
   }
   
   }

   
   

   Here is the screenshot

   

5. We can add some more styles to the modal window, for example border-radius, padding, and box-shadow. We also add max-width: 480px and max-height: 80% so the text looks like it is inside a frame. We add overflow-y: auto to make scrolling possible when there is a lot of text inside the modal. We can also change the overlay opacity to 0.8 and set the modal background color to black.

   Here is the code:

   .modal-overlay {
       background-color: rgba(0, 0, 0, 0.8);
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 999;
       justify-content: center;
       align-items: center;
       display: flex;
   }
   
   .modal {
       border-radius: 4px;
       padding: 16px;
       box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
       max-width: 480px;
       max-height: 80%;
       overflow-y: auto;
       background-color: black;
   }

   Here is the screenshot

   

6. Here you have basic form of modal window, voila!