Modal

index.html

<h1>Modal</h1> 

<button class="clickme">
  Click here!
</button>

<div class="shade hidden">
</div>
<div class="modal hidden">
  <div class="modal-head">
    <h2>This is a Modal!</h2>
    <button class="close">&times;</button>
  </div>
  <div class="modal-body">
    <p>This is the body of the modal</p>
    <p>Kitten Ipsum dolor sit amet fluffy fur, justo front parturient Sed sagittis derp loving saving adopted consequat amet crosseyed sodales aliquet girlfriend. Aliquam cute enim, rutrum nec Donec urna id new Proin couch disapproval eget petting ante kitten? Ligula mi royal sed dolor Nullam, cat's dictum bed love lorem tongue he sem iaculis cat cats she's risus Calvin Quisque hiss velit lick amused. Kitty gf's backyard saved aww in cute Cum purus tristique nina amet trust nisi saved Suspendisse, friend spoon kitties buddy somebody congue saved living volutpat! Convallis id she's Baxter oscar semper, attack convallis ante cat tincidunt eyes napping eu. Vehicula porttitor dolor buddy id quam family girlfriend special Duis Pellentesque, nulla pretium mus drinks paw paw napping mi scottish fold nisi. Imperdiet pulvinar consectetur loved sneak she egestas tortor somebody, face terrified cat psycho eu.</p> 
  </div>
</div>

Modal.markdown

Modal ('-' * 5) Modal Example that uses CSS and jQuery

A Pen by Ryan Trimble on CodePen.

License.

script.js

$(function() {
  $(".clickme").click(function() {
    $(".shade, .modal").toggleClass("shown").removeClass("hidden");
  });
  $(".close").click(function() {
    $(".shade, .modal").toggleClass("hidden").removeClass("shown");
  });
  $(".shade").click(function() {
    $(".shade, .modal").toggleClass("hidden").removeClass("shown"); 
  });
});

style.css

@import url(http://fonts.googleapis.com/css?family=Slabo+27px);
body{
  background:#333;
}
h1, .clickme, .modal{
  font-family: 'Slabo 27px', serif;
}
h1, .clickme{
  color:white;
  text-shadow: #333 1px 1px 0px;
  display:block;
  margin:0 auto;
  text-align:center;
}
.clickme{
  padding:50px;
  background:#3498db;
  width:300px;
  border:0;
  border-bottom:6px solid lighten(#3498db, 10%);
  border-radius:20px;
  text-align:center;
  font-size:2em;
}
.clickme:active{
    color:#ecf0f1;
    text-shadow: #333 1px 1px 0px;
    background:#2980b9;
    border-bottom:6px solid lighten(#2980b9, 10%);
  }
.hidden{
  visibility:hidden;
}
.shown{
  visibility:visible;
}
.shade{
  position:absolute;
  overflow:none;
  top:0;
  background: hsla(0,0,0,.4);
  width:100vw;
  height:100vh;
  transition: background 1s;
}
.modal{
  display:inline-block;
  position:fixed;
  top:50%; 
  left:50%;
  transform: translate(-50%, -50%);
  width:400px;
  background:white;
  padding:25px;
  border-radius:10px;
  z-index:100;
  margin:0 auto;
  .close{
      font-size:2em;
      float:right;
      font-weight:800;
      width:60px;
      height:60px;
      background:none;
      border:none;
    }
  .modal-head{
    h2{
      display:inline-block;
    }
  }
  .modal-body{
    line-height:1.5;
  }
}