It can make a modal popup window with just HTML and CSS? -

i interested know if can make modal pop-up window using html , css without jquery.

does know such simple example?

thanks in advance!

a modal html , css no jquery or javascript

body {  color: #333333;  font-family: 'helvetica', arial;  height: 80em;  }  .wrap {  padding: 40px;  text-align: center;  }  hr {  clear: both;  margin-top: 40px;  margin-bottom: 40px;  border: 0;  border-top: 1px solid #aaaaaa;  }  h1 {  font-size: 30px;  margin-bottom: 40px;  }  p {  margin-bottom: 20px;  }  .btn {  background: #428bca;  border: #357ebd solid 1px;  border-radius: 3px;  color: #fff;  display: inline-block;  font-size: 14px;  padding: 8px 15px;  text-decoration: none;  text-align: center;  min-width: 60px;  position: relative;  transition: color .1s ease;  /* top: 40em;*/  }  .btn:hover {  background: #357ebd;  }  .btn.btn-big {  font-size: 18px;  padding: 15px 20px;  min-width: 100px;  }  .btn-close {  color: #aaaaaa;  font-size: 30px;  text-decoration: none;  position: absolute;  right: 5px;  top: 0;  }  .btn-close:hover {  color: #919191;  }  .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;  }  .modal:target:before {  display: block;  }  .modal:target .modal-dialog {  -webkit-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);  top: 20%;  }  .modal-dialog {  background: #fefefe;  border: #333333 solid 1px;  border-radius: 5px;  margin-left: -200px;  position: fixed;  left: 50%;  top: -100%;  z-index: 11;  width: 360px;  -webkit-transform: translate(0, -500%);  -ms-transform: translate(0, -500%);  transform: translate(0, -500%);  -webkit-transition: -webkit-transform 0.3s ease-out;  -moz-transition: -moz-transform 0.3s ease-out;  -o-transition: -o-transform 0.3s ease-out;  transition: transform 0.3s ease-out;  }  .modal-body {  padding: 20px;  }  .modal-header,  .modal-footer {  padding: 10px 20px;  }  .modal-header {  border-bottom: #eeeeee solid 1px;  }  .modal-header h2 {  font-size: 20px;  }  .modal-footer {  border-top: #eeeeee solid 1px;  text-align: right;  }  /*added stop scrolling top*/  #close {  display: none;  }

<div class="wrap">      <h1>modal - pure css (no javascript)</h1>        <hr />      <a href="#modal-one" class="btn btn-big">modal!</a>      </div>     <!-- modal -->  <div class="modal" id="modal-one" aria-hidden="true">    <div class="modal-dialog">      <div class="modal-header">        <h2>modal in css?</h2>        <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--changed "#close"-->      </div>      <div class="modal-body">        <p>one modal example here! :d</p>      </div>      <div class="modal-footer">        <a href="#close" class="btn">nice!</a>  <!--changed "#close"-->      </div>      </div>    </div>  </div>  <!-- /modal -->