Thread: Link to a pure CSS modal already 'poppedup'

Hi All,

I am using a pure css template for modal popups. I would like to know how to make a link to an already 'poppedup' modal so I can share it.

Thanks


Fiddle


HTML

Code:

<label for="modal1">OPEN</label>
<input type="checkbox" class="modal" id="modal1">
<div class="modal">
  <article>
    <p>Modal content here!</p>
  </article>
  <label for="modal1" class="close"></label>
  <label for="modal1" class="overlay"></label>
</div>

CSS

Code:

label {
  color: #00f;
  text-decoration: underline;
  cursor: pointer
}

.modal,
.modal * {
  box-sizing: border-box;
  -moz-box-size: border-box;
  transition: all .2s ease-in-out
}

.modal:checked+.modal {
  opacity: 1;
  pointer-events: all
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  padding: 15px;
  overflow-y: scroll;
  opacity: 0;
  pointer-events: none
}

.modal article {
  background: #fff;
  width: 100%;
  padding: 50px;
  position: relative;
  z-index: 700
}

.modal .close:before {
  content: '×';
  display: block;
  padding: 20px 30px;
  font-size: 200%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 800;
  cursor: pointer
}

.modal .close:hover:before {
  color: #c00
}

.modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 600;
  cursor: pointer
}