Mobile-friendly Modal Window In Pure CSS – modal_box

Category: CSS & CSS3 , Modal & Popup | April 16, 2018
Views Total:6,198 views
Official Page:Go to website
Last Update:April 16, 2018


Mobile-friendly Modal Window In Pure CSS – modal_box


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 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> <!-- /modal -->

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

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



  • Updated

You Might Be Interested In:

Leave a Reply