Alternative to using label and input in css modal

Question

I got this css modal script and wondering why I can't replace <label> with <a> or <div> tag.
Also, What is the point of this line below? Why can't I replace <input> with something else like <div>?

Here's the complete CSS Code:

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  height: 50%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {

  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}

and HTML

<p>
    <label class="btn" for="modal-1">Show me modal with a cat</label>
</p>

<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
    <h2>The title!</h2>
    <p>This is the body</p>
  </div>
</div>

JSFIDDLE DEMO

score 4 · Accepted Answer · answered Feb 21 '17 at 22:28

Because clicking on a label will toggle a checkbox, but clicking on a link will go to another page and clicking on a div will do nothing.
The modal depends on the checked state of the input. A div can't be checked.

The whole thing is a nasty hack. It's clever, but nasty. Tracking state in order to display content based on user interaction is a job better handled by JavaScript.

score 2 · Answer 2 · edited May 23 '17 at 10:29

2

You have to use a label as explained here

This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 21 '17 at 22:28

Kevin Jantzer

9,215
2
28
52

score 2 · Answer 3 · answered Feb 21 '17 at 22:29

The label will change the state of the input[type=checkbox] when clicked, and can be placed anywhere on the document.

The input[type=checkbox] must be placed right next to the modal so the modal can be targeted with CSS:

input + .modal { display:none; }
input:checked + .modal { display:block}

score 1 · Answer 4 · answered Feb 21 '17 at 22:49

The <label> element has a for="" attribute, it looks for the same value of id="" where you set on a form element.

Example: <label for="myid1">...</label> <input id="myid1"> when you click on the label it will change the state of the matching form element. They are normally next to each other in the markup, but not necessarily.

For <input type="checkbox">, you can capture :checked state in the CSS and change some style to itself or next siblings by using + or ~ selector. Which means that modal div needs to be a sibling of the checkbox and next to it.

All of these put in together is to use the label to control the div, a CSS way of making a modal without using any Javascript.

Alternative to using label and input in css modal

4 Answers4