YahooBaba : Online Tutorials

Pure CSS Modal Box

Change View

HTML

<h1>Modal Box in Pure CSS</h1>

<div class="modal-container">
 <input id="modal-toggle" type="checkbox">
 <label class="modal-btn" for="modal-toggle">Click me</label> 
 <label class="modal-backdrop"></label>

<div class="modal-content">
  <label class="modal-close" for="modal-toggle">×</label>
  <h2>Modal title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, placeat, ad. Eveniet repellendus, totam soluta sed perferendis. Eos, nam, excepturi.</p> 
  <label class="modal-content-btn" for="modal-toggle">OK</label>   
 </div>          
</div>

<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque officia laudantium, 
 velit adipisci ipsa odit, quod qui culpa? Nulla nostrum iste, distinctio voluptate! 
 Corrupti id architecto ipsa nihil? Delectus cumque pariatur vel, ea aliquid quam minus 
 aliquam similique facilis ipsa quasi placeat officiis inventore cupiditate nam magnam necessitatibus
 non hic. Aliquam excepturi qui eaque mollitia expedita id, ea voluptatibus, fugit magni tempora dicta 
 est vitae, aspernatur. Velit incidunt dolor possimus officia, illo eum asperiores minus neque tempore 
 fugiat itaque sit eaque nisi quam maiores consequuntur, iusto tenetur perspiciatis. Quisquam facere 
 dolores optio molestias odit aspernatur dolor earum labore sit, ipsa nisi perferendis cupiditate 
 pariatur, nam consectetur modi fuga natus, tempore quidem, sunt perspiciatis error voluptatibus? 
 Soluta, voluptas delectus possimus. Eum, est, aliquam. Dolores molestiae eveniet sequi, numquam nisi 
 voluptatum, ut officia et nam esse! Molestiae distinctio, tenetur error, assumenda, dolorum 
 quidem deleniti delectus excepturi similique praesentium consequatur eligendi inventore perspiciatis, 
 aliquam. Perspiciatis excepturi, neque tempore distinctio et, quo quos consequuntur.
</p>

CSS

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

body {
  background: #fff;
  font-family: arial;
  padding:50px;
}
h1{
 text-align: center;
}

.container{
 width:1100px;
 margin: 0 auto;
}

.modal-container .modal-btn {
  display: block;
  color: #fff;
  background: #e74c3c;
  width: 160px;
  height: 50px;
  font-size: 22px;
  line-height: 50px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 5px 5px -5px #333;
  transition: background 0.3s ease-in;
}
.modal-container .modal-btn:hover {
  background: #c0392b;
}
.modal-container .modal-content,
.modal-container .modal-backdrop {
  height: 0;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease-in;
}
.modal-content h2{
 border-bottom: 2px solid #000;
 padding-bottom: 5px;
}
.modal-container .modal-close {
  color: #aaa;
  background: #fff;
  width: 25px;
  height: 25px;
  padding-top: 3px;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.modal-container .modal-close:hover {
  color: #333;
}
.modal-container .modal-content-btn {
  position: absolute;
  bottom: 20px;
  right: 30px;
  background: #3498db;
  color: #fff;
  width: 50px;
  height: 32px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  padding-top: 9px;
}
.modal-container .modal-content-btn:hover {
  color: #fff;
  background: #2980b9;
}
.modal-container #modal-toggle {
  display: none;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in;
}
.modal-container #modal-toggle:checked ~ .modal-content {
  background-color: #fff;
  max-width: 400px;
  width: 400px;
  height: 300px;
  padding: 10px 30px;
  border-radius: 4px;
  position: fixed;
  left: calc(50% - 200px);
  top: 12%;
  z-index: 999;
  cursor: auto;
  visibility: visible;
  opacity: 1;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
}
@media (max-width: 400px) {
  .modal-container #modal-toggle.active ~ .modal-content, 
  .modal-container #modal-toggle:checked ~ .modal-content {
    left: 0;
  }
}

HTML

CSS

Javascript