JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<script src="https://toruskit.com/toruskit/toruskit-pro/dist/js/toruskit.js"></script>
<script src="https://toruskit.com/assets/js/jquery.min.js"></script>
<script src="https://www.101cookbooks.com/wp-content/themes/101cookbooks/inc/assets/js/popper.min.js"></script>
<script src="https://toruskit.com/assets/js/docs.js"></script>
<script src="https://toruskit.com/assets/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://toruskit.com/toruskit/toruskit-pro/dist/css/toruskit.css">
<link rel="stylesheet" href="https://toruskit.com/assets/font/font-awesome/css/all.css">
<script src="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,500|Google+Sans:400,500,700|Material+Icons|Google+Sans+Display:400,500,700|Google+Sans+Text+Beta:400,500,700,400i,500i,700i"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.cs"></script>
<div class="container">
  <div id="text">
    text
  </div>
</div>

<div class="content">
  <!-- Button trigger modal -->
  <button type="button" style="display:none;" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" id="trigger">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <p class="modal-title" id="exampleModalLongTitle">Fast Navigation</p>
          <button type="button" id="close" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row m-5">
            <div class="col-3">
              <button type="button" class="btn btn-primary-light">Primary</button>
            </div>
            <div...

CSS

.close {
  height: 25px;
}

.col{
  margin-bottom:2rem;
}

JavaScript

function KeyPress(e) {
  var evtobj = window.event ? event : e
  //if (evtobj.keyCode == 13 && evtobj.ctrlKey) {
  if (evtobj.altKey) {
    var button = document.querySelector('#trigger')
    var content = document.querySelector('#content')
    button.click()
  }
  exit()
}

document.onkeydown = KeyPress;

document.onkeyup = document.querySelector('#close').click();

var fired = false;
var button = document.querySelector('#trigger')
    
element.onkeydown = function() {
    if(!fired) {
        fired = true;
        // do something
    }
};

element.onkeyup = function() {
    fired = false;
};