Responsive Modals made purely with HTML & CSS

modal.css

.modal, [hidden]             { display: none; }
.modal                       { position: fixed; display: none;
                               z-index: 1000;
                               background: rgba(0,0,0,0.6); }
.modal, .modal>label         { top: 0; left: 0; right: 0; bottom: 0;
                               padding: 15px;
                               flex-direction: column; align-items: center; justify-content: center; }
.modal>label                 { position: absolute; display: flex; }
.modal>div, .modal>label>div { position: relative; box-sizing: border-box;
                               background: #fff;
                               border-radius: 3px;
                               padding: 25px;
                               max-height: 100%; max-width: 100%; width: 500px;
                               overflow-x: hidden; overflow-y: auto; }
:checked + .modal            { display: flex; }

modal.min.css

.modal,[hidden]{display:none}.modal{position:fixed;z-index:1000;background:rgba(0,0,0,.6)}.modal>label,:checked+.modal{display:flex}.modal,.modal>label{top:0;left:0;right:0;bottom:0;padding:15px;flex-direction:column;align-items:center;justify-content:center}.modal>label{position:absolute}.modal>div,.modal>label>div{position:relative;box-sizing:border-box;background:#fff;border-radius:3px;padding:25px;max-height:100%;max-width:100%;width:500px;overflow-x:hidden;overflow-y:auto}

Responsive Modals.md

Responsive Modals made purely with HTML & CSS

…in less than half a kilobyte

All you need is the file modal.min.css and the following code:

<input id="helloworld" type="checkbox" hidden><div class="modal">
  <label for="helloworld"></label><!-- close modal on click -->
  <div><!-- modal contents -->
    <h1>Look at this awesomeness!</h1>
    Hello, I'm a modal window!
  </div>
</div>

<label for="helloworld">Open the modal!</label>

View Demo

Access through JavaScript

JavaScript wrapper functions

window.modal={};
modal.toggle = function toggle(id){document.getElementById(id).click()}
modal.open   = function open(id){(function(e){!e.checked&&e.click()})(document.getElementById(id))}
modal.close  = function close(id){(function(e){e.checked&&e.click()})(document.getElementById(id))}
modal.isOpen = function isOpen(id){return document.getElementById(id).checked}
modal.listen = function change(id,fn){document.getElementById(id).addEventListener("change",function(){fn(event.target.checked)}.bind(fn))}

Toggle a modal

modal.toggle(id)

Open a modal

modal.open(id)

Close a modal

modal.close(id)

Check if a modal is open

modal.isOpen(id)

Open/Close event

modal.listen(id, function(isOpen) {
  console.log(isOpen ? "Opened" : "Closed");
}

Using it as a responsive lightbox (also <0.5KB)

<input id="lightbox" type="checkbox" hidden><div class="modal">
  <label for="lightbox"><div style="padding: 0; font-size: 0; width: 100%; background: transparent">
    <img width="100%" onload="this.parentElement.style.width = 'calc((100vh - 30px) * ' + (Math.floor(this.width * 1000 / this.height) / 1000) + ')'">
  </div></label>
</div>
<script>
  function lightbox(url) {
    var modal = document.getElementById("lightbox");
    modal.nextElementSibling.getElementsByTagName("img")[0].src = url || event.target.src;
    modal.checked = true;
  }
</script>

<img src="my-image.jpg" onclick="lightbox()">

View demo

Minified version

<input id="lightbox" type="checkbox" hidden><div class="modal"><label for="lightbox"><div style="padding:0;font-size:0;width:100%;background:transparent"><img width="100%" onload="this.parentElement.style.width='calc((100vh-30px)*'+(Math.floor(this.width*1000/this.height)/1000)+')'"></div></label></div><script>function lightbox(u){var m=document.getElementById("lightbox");m.nextElementSibling.getElementsByTagName("img")[0].src=url||event.target.src;m.checked=true}</script>

Changelog

2017-05-08: Release
2017-05-08: Content div can now be nested inside the closing label, which means that clicking the content can now also close the modal. Added lightbox example and JS wrapper.

---

public domain / cc0