Pure CSS MODAL!

http://blog.kangrian.com

by justinwinter

HTML

<body translate="no">

  <div class="container">
    <ul>

      <li class="dropdown">
        <input type="checkbox" />
        <a href="#" data-toggle="dropdown">Important to Know</a>
        <ul class="dropdown-menu">
          <label class="btn btn--blue" for="modal-1">Calendar Year Deductible</label>           <label class="btn btn--blue" for="modal-2">Individual Deductible</label>
					<label class="btn btn--blue" for="modal-3">Family Maximun Deductible</label>
					<label class="btn btn--blue" for="modal-4">Deductible Carry-Over</label>
          <label class="btn btn--blue" for="modal-5">Dental Coverage Optional</label>
					 <label class="btn btn--blue" for="modal-6">Claims Provision</label>
					 <label class="btn btn--blue" for="modal-7">Brand-Name Drug vs. Generic Drug</label>
				        </ul>
      </li>

      <input class="modal-state" id="modal-1" type="checkbox" />
      <div class="modal">
        <label class="modal__bg" for="modal-1"></label>
        <div class="modal__inner">
          <label class="modal__close" for="modal-1"></label>
          <h2>Calendar Year Deductible</h2>
          <p>Medical and dental deductibles are combined.</p>
					<table border="1" bordercolor="#888" cellspacing="0" style="margin:auto;border-collapse:collapse;border-color:rgb(136,136,136);border-width:1px">
<tbody>
<tr> 
<td style="width:180px"><b>Covered Charges</b></td>
<td style="width:180px; text-align:center;"><b>Network Providers</b></td>
<td style="width:170px; text-align:center;"><b>Non-Network Providers</b></td>
</tr>
<tr>
<td style="width:180px">Individual Deductible</td>
<td style="width:180px; text-align:center;">$350</td>
<td style="width:180px; text-align:center;">$350</td>
</tr>
<tr>
<td style="width:180px">Family Maximum</td>
<td style="width:180px; text-align:center;">$1,050</td>
<td style="width:180px; text-align:center;">$1,050</td>
</tr>
</tbody>
</table>

        </div>
      </div>

      <input class="modal-state" id="modal-2"...

CSS

/* [Object] Modal
 * =============================== */

body {
  font-family: Calibri, Helvetica, sans-serif;
  font-size: 17px;
}

*,
*:before,
*:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 360px;
  margin: 15px auto;
}

.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.dropdown {
  position: relative;
}

.dropdown a {
  text-decoration: none;
  border-radius: 10px;
}

.dropdown [data-toggle="dropdown"] {
  display: block;
  color: white;
  background: #4ba0e5;
  padding: 15px;
  margin: 0 0 10px 0;
}

.dropdown [data-toggle="dropdown"]:hover {
  background: #4ba0e5;
}

.dropdown [data-toggle="dropdown"]:before {
  position: absolute;
  display: block;
  content: '\25BC';
  font-size: 14px;
  color: #fff;
  top: 17px;
  right: 16px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}

.dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
}

.dropdown > .dropdown-menu li {
  padding: 0;
}

.dropdown > .dropdown-menu li a {
  display: block;
  width: 335px;
  color: white;
  background: #656a6d;
  padding: 10px 10px;
 ...