A Pen by Felipe Nunes.

css3-modal-example.markdown

css3 modal example

pure css modal example

A Pen by Felipe Nunes on CodePen.

License.

index.html

<section class="wrp">
  <span class="modal-trigger"><a href="#modal-example" class="bt" aria-role="button">open modal example</a></span>
  <div class="wf-modal" aria-hidden="true" id="modal-example">
    <article class="wf-dialog-modal">
      <header class="wf-header-modal">
        <h2 class="tit">Modal Example</h2>
        <span class="close"><a href="#" class="bt" aria-hidden="true"></a></span>
      </header>
      <div class="wf-content-modal">
        <p>This is an modal example</p>
      </div>
      <footer class="wf-footer-modal">
        <span class="ok"><a href="#" class="bt" aria-hidden="true">ok</a></span>
      </footer>
    </article>
  </div>
</section>

style.scss

* {margin:0;padding:0;box-sizing:border-box;}

body {font-family:arial;}

.wrp {
  width:320px;
  margin:50px auto;
  text-align:center;
}

.bt {
  cursor:pointer;
  border:1px solid #369;
  background:#369;
  text-align:center;
  padding:5px 10px;
  color:#fff;
  display:inline-block;
  text-decoration: none;
}

.wf-modal {
  text-align: left;
  .tit {
    font-size: 20px;
    margin:0;
  }
  .close .bt {
    position:absolute;
    right:5px;
    top:5px;
    background:none;
    color:#ccc;
    padding:5px 10px;
    border:0;
    &:before {
      content: "\f00d";
      font-family:'fontAwesome'
    }
  }
  &:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  &:target:before {
    display: block;
  }
  &:target {
    .wf-dialog-modal {
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      transform: translate(0, 0);
      top: 20%;
    }
  }
}
.wf-dialog-modal {
  background: #fefefe;
  border: 1px solid #333;
  border-radius: 5px;
  margin-left: -150px;
  position: fixed;
  left: 50%;
  top: 100%;
  z-index: 11;
  width: 295px;

  -webkit-transform: translate(0, 500%);
  -moz-transform: translate(0, 500%);
  transform: translate(0, 500%);

  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.wf-content-modal {
  padding:10px;
}
.wf-header-modal,
.wf-footer-modal {
  padding:10px;
}
.wf-header-modal {
  border-bottom: 1px solid #eee
}
.wf-footer-modal {
  border-top: 1px solid #eee;
  text-align: right;
}