Modal Dialog With Only CSS

Use CSS to create Modal Dialog. It’s fun. Click me to see it.

Put your elements inside div.modal

1
2
3
4
5
6

<div id="samplemodal" class="modal-contain">
  <div class="modal">
    <a href="#">X</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Let’s see how css work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//Hide the modal when nothing happen
.modal-contain {
  display: none;
}

//When modal-contain is targeted. Show it
.modal-contain:target {
  display: block;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.75);
}

//In order to vertical and horizon align
.modal {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 25em;
  padding: 1em;
  background: #fff;
}
css
Comments

Comments