<div class="wrap">

  <h1>Modal - Pure CSS (no JavaScript) - 2013</h1>
  
  <p>Example of modal just in CSS. I use the pseudo selector ":target" for modal action.</p>
  
  <p>This works in IE9+ and all modern browsers.</p>
  
  <p>View <a href="http://www.felipefialho.com/css-components/">Pure CSS Components</a> project.</p>
  
  <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="#" class="btn-close" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      <p>One modal example here! :D</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Nice!</a>
    </div>
  </div>
</div>
<!-- /Modal -->

//
// Variables
// ----------------------

@gray: #333;
@gray-light: #aaa;
@gray-lighter: #eee;
@space: 40px;
@blue: #428bca;
@blue-dark: darken(@blue, 5%);

// Mixin for transition/transform
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
}
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

//
// Body
// ----------------------

body{
  color: @gray;
  font-family: 'Helvetica', arial;
}

.wrap{
  padding: @space;
  text-align: center;
}

hr {
  clear: both;
  margin-top: @space;
  margin-bottom: @space;
  border: 0;
  border-top: 1px solid @gray-light;
}

h1{
  font-size: 30px;
  margin-bottom: @space;
}

p{
  margin-bottom: @space/2;
}

//
// Btn 
// ----------------------

.btn{
  background: @blue;
  border: @blue-dark 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;
  
  &:hover{
    background: @blue-dark;
  }
  
  &.btn-big{
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
  }
  
}

.btn-close{
  color: @gray-light;
  font-size: 30px;
  text-decoration: none;
  position: absolute; right: 5px; top: 0;
  
  &:hover{
     color: darken(@gray-light, 10%);
  }
  
}

//
// Modal
// ----------------------

.modal{
   
  // This is modal bg
  &:before{
    content: ""; 
    display: none;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; 
    z-index: 10;
  }
  
  &:target{
     
    // Active animate in modal
    &:before{
      display: block;
    }  
    .modal-dialog{
      .translate(0, 0); 
      top: 20%;  
    }
     
  }
  
}

// Modal Dialog
// ----------------------

.modal-dialog{
  background: #fefefe;
  border: @gray solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed; 
  left: 50%; 
  top: -100%;  
  z-index: 11; 
  width: 360px;
  .translate(0, -500%);
  .transition-transform(~"0.3s ease-out");
}

.modal-body{
  padding: @space/2;
}

.modal-header,
.modal-footer{
  padding: @space/4 @space/2;
}

.modal-header{
  border-bottom: @gray-lighter solid 1px;
  
  h2{
    font-size: 20px;
  }
  
}

.modal-footer{
  border-top: @gray-lighter solid 1px;
  text-align: right;
}
 

// No Javascript :D