CSS3 Windows 8 Modal

A simple Windows 8 modal. Click the 'Open Modal' button below to check it out.

Been looking around for a CSS/JS Windows 8 Modal, could have skinned other modals just to look like this. Made this from scratch for personal purposes. 'CSS transforms' centers the modal vertically. Doesn't depend on jQuery. The CSS file doesn't include normalize or reset.

Basic Template and Usage

      
  <!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="css/win8modal.css" type="text/css" />
      <script src="js/win8modal.js"></script>
    </head>
    <body>
      <button type="button" data-wm-role="open">
        Open Modal
      </button>

      <div class="win8modal">
        <button type="button" data-wm-role="close">Close Modal</button>
      </div>     
      <div class='win8modal-cover'></div>
      <script type="text/javascript">
        Win8Modal.install();
      </script>    
    </body>
  </html>    
    

See on Github Download

Made by Ace Subido | http://acesubido.com

To close the modal, click the 'Close Modal' button below.
Clicking outside the modal also closes the modal.
You can also hit the ESC to close this modal.

If you like this, also check out CSS Microsoft Metro Buttons