Accessible Confirm

Accessible Confirm

by Wemlin

HTML

<button id="js-show-alert">Show Alert</button>

  <div class="prompt" id="js-prompt">
    <button id="js-cancel">Cancel</button>
    <button id="js-confirm">Confirm</button>
  </div>

CSS

.prompt {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none;
      width: 300px;
      height: 30px;
      padding: 80px 0;
      text-align: center;
      border: 2px solid red;
      background-color: coral;
    }

JavaScript

var $ = function (sel) {
      return document.querySelector(sel);
    };

    $('#js-show-alert').addEventListener('click', function () {
      $('#js-prompt').style.display = 'block';
      $('#js-prompt').focus();
    });

    $('#js-cancel').addEventListener('click', function () {
      if (confirm('Are your sure?')) {
        $('#js-prompt').style.display = 'none';
      }
    });

    $('#js-confirm').addEventListener('click', function () {
      $('#js-prompt').style.display = 'none';
      alert('Confirmed! The Prompt will disappear');
    });
    
    
    // http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html
    
    // https://assets-cdn.github.com/assets/frameworks-2faa64c258d18114b70211f551b345873dc4af6a257bd9faefe53e5a0de3c3e9.js
    
    // https://assets-cdn.github.com/assets/github-42a7c39893d3482bcf50f3231d8e2063b2689a9093a430582a7a7e5d17c7b886.js