Mobile-friendly Modal Window In Pure CSS – modal_box

Preview:

Description:

Just another CSS library that makes it easier to create modal windows for both desktop and mobile devices.

How to use it:

Download and insert the stylesheet ‘modal-box.min.css’ in the header of the html page.

<link href="css/modal-box.min.css" rel="stylesheet">

Create the modal window with custom content and action buttons as follow:

<div aria-hidden="true" role="dialog" class="modal-dialog dialog" id="open-modal">
  <div class="modal">
    <a href="#close" title="Close" class="close">×</a>
    <div class="header-modal no__select">
      <h1><strong>↤</strong> Parameters</h1> <span><strong class="mob-hide">Action:</strong> <a href="#open-modal" title="Validate changes"><svg class="svg-icon" viewBox="0 0 20 20">✔<path d="M7.6 14.6c0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.3-0.1 0.5-0.2l8.2-8.2c0.3-0.3 0.3-0.7 0-0.9 -0.3-0.3-0.7-0.3-0.9 0l-7.8 7.8L4.2 9.3c-0.3-0.3-0.7-0.3-0.9 0 -0.3 0.3-0.3 0.7 0 0.9L7.6 14.6z"></path></svg></a></span>
    </div>
    <div class="inner-dialog">
      <h2>Modal Box</h2>
    </div> <!-- /inner-dialog -->
    <div class="footer-modal no__select">
      <a href="#" class="">Help</a> <a href="#close" class="help">Close</a>
    </div>
  </div> <!-- /modal -->
 
</div>

You might need a trigger button to toggle the modal window.

<a href="#open-modal" class="button" id="b-active">Open Modal</a>

Changelog:

04/16/2018

• Updated