How to Open Popup Modal using Pure CSS NO!! Javascript

642

How to Open Popup Modal using Pure CSS NO!! Javascript – In this tutorial I am going to share simple lightweight CSS only plugin to open Quick Modal/Popup on button click without Javascript. This plugin create bootstrap like Model to display your inline HTML content in Popup Window without javascript.

Creating Popup Modal In Pure CSS

Libraries

Include CSS library on page to open popup window.

<link href="modals.css" rel="stylesheet">

HTML

Creating Modal window which will display on button click.

<div class="modal">
  <div class="modal-header">
    <h3>Modal Title</h3>
    <label for="modal">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAABNTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU0N3NIOAAAAJnRSTlMAAQIDBAUGBwgRFRYZGiEjQ3l7hYaqtLm8vsDFx87a4uvv8fP1+bbY9ZEAAAB8SURBVBhXXY5LFoJAAMOCIP4VBRXEv5j7H9HFDOizu2TRFljedgCQHeocWHVaAWStXnKyl2oVWI+kd1XLvFV1D7Ng3qrWKYMZ+MdEhk3gbhw59KvlH0eTnf2mgiRwvQ7NW6aqNmncukKhnvo/zzlQ2PR/HgsAJkncH6XwAcr0FUY5BVeFAAAAAElFTkSuQmCC" width="16" height="16" alt="">
    </label>
  </div>
  <p>Modal Content</p>
</div>

 

Create the background overlay of the modal window.

<label for="modal" class="modal-background"></label>

Finally Create toggle button to open/close modal window.

<input type="checkbox" id="modal">
<label for="modal" class="example-label">Open Modal</label>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.