Pretty Simple Modal Window In Vanilla JavaScript – modalzinha.js

Preview:

Description:

modalzinha.js is a minimal (less than 1kb) vanilla JS plugin for building a responsive modal window to present your inline content within the document.

How to use it:

Load the CSS file modalzinha.css and JavaScript file modalzinha.js in the webpage.

<link rel="stylesheet" href="modalzinha.css">
<script src="modalzinha.js"></script>

Embed you own content to the modal.

<div class="modal-wrapper" data-modal="wrapper">
  <div class="modal-content">
    <div class="relative">
      <button data-modal="close" class="btn btn-close">&times;</button>
      <div class="text">
        <p>Modal Content</p>
      </div>
    </div>
  </div>
</div>

Create a trigger button for the modal window. That’s it.

<button class="btn btn-open" data-modal="open">Open</button>