Modal - Pure CSS (no Javascript)

index.html

<div class="purecss-modal-cta">
  <a href="#modal-one">
    <img src="https://i.ytimg.com/vi/oHg5SJYRHA0/hqdefault.jpg" alt="play" />
  </a>
</div>
 
<!-- Modal -->
<div class="purecss-modal" id="modal-one" aria-hidden="true">
  <div class="purecss-modal-dialog">
    <div class="purecss-modal-header">
      <a href="#purecss-close" class="purecss-btn-close" aria-hidden="true">&#10060;</a>
    </div>
    <div class="purecss-modal-body">
      <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    </div>
  </div>
</div>
<!-- /Modal -->

Modal - Pure CSS (no Javascript).markdown

Modal - Pure CSS (no Javascript)

Example of modal in CSS only, here we use the pseudo selector ":target" and no javascript for modal action.

Thanks ands credit to http://codepen.io/LFeh/pen/oEula/ and http://drublic.github.io/css-modal/

Forked from Luiz Felipe Tartarotti Fialho's Pen Modal - Pure CSS (no Javascript).

A Pen by Elfhir on CodePen.

License.

script.js

// No Javascript :D

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.purecss-btn-close {
  display: inline-block;
  position: relative;
  padding: 1px;
  min-width: 22px;
  min-height: 22px;
  left: 98.5%;
  top: -17px;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  border: 2px solid #ffffff;
  -webkit-box-shadow:inset 0 0 0 5px #000000;
          box-shadow:inset 0 0 0 5px #000000;
  -webkit-border-radius: 50px;
          border-radius: 50px;
}
.purecss-btn-close:hover {
  color: #919191;
}
.purecss-modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.purecss-modal:target:before {
  display: block;
}
.purecss-modal:target .purecss-modal-dialog {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.purecss-modal-dialog {
  background: #fefefe;
  border: #333333 solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed;
  padding: 5px;
  left: 50%;
  top: -100%;
  z-index: 11;
  min-width: 425px;
  height: 315px;
  -webkit-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.purecss-modal-body {
  position: relative;
  top: -27px;
}
/*ADDED TO STOP SCROLLING TO TOP*/
#purecss-close {
  display: none;
}