Post
Ask Question

CSS Hacks - Modal Window/Dialog Using CSS

Introduction

In this blog, we are going to see how to create a modal Window/Dialog using CSS without any JavaScript and JQuery.

Modal Window using CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Modal Window using CSS</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div>
      <a href="#modal-window">Open Modal Window</a>
    </div>
    <div id="modal-window" class="modalwindow">
      <div class="modalwindow__container">
        <div class="modalwindow__header">
          <span class="modalwindow__title">Modal Window</span>
          <a href="#" class="modalwindow__close">&times</a>
        </div>
        <div class="modalwindow__content">
          <p>This is Sample Modal Window Using CSS.</p>
        </div>
      </div>
    </div>
  </body>
</html>

In the above HTML code, 

I have created one anchor (<a></a>) element which is linked to my modal window, dialog by assigning the modal window id (#modal-window)  to "href" attribute.

<a href="#modal-window">Open Modal Window</a>

I have created a modal window part, which has a header and content part. Initially, the modal window has hidden (visibility: hidden).

.modalwindow {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgray;
  transition: all 0.4s;
}

When I click on the anchor element, just change the visibility of the modal window to visible (visibility: visible) in CSS. Now the modal window displays.

.modalwindow:target {
  visibility: visible;
  opacity: 1;
}

CSS Hacks

CSS Hacks
Next Recommended Reading How to customize HTML/ASP.NET button style using CSS?