Question

0

171

Views

Open popup-modal when function gets called Javascript

I have a function that detects the users keyboard, and when the user writes the combination of 4 2 0 on his keyboard, I'm trying to have a popup-modal open up.

 <script type="text/javascript" src="main.js"></script>
  <script language="javascript">
    easteregg();
 </script>

<div id="myModal" class="modaljs">

  <div class="modal-contentjs">
    <span class="close">&times;</span>
    <p>You made it!</p>
  </div>

</div>

function easteregg() {

var modal = document.getElementById("myModal");

var span = document.getElementsByClassName("close")[0];

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}

let sequence = ''; 

window.addEventListener('keyup', function(event) {
  sequence = `${sequence}${event.key}`.substr(-3);
if (sequence === '420') 
this.modal("show");
})

};

I understand that the

this.modal("show");

is wrong, but I dont know what to put in there.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T02:29:33.414Z

You can use Bootstrap and Vanilla.js to do it.

Bootstrap 5 no longer needs jQuery as a dependency since JavaScript can provide the same functionality.

e. g.

const _tmp = [];
const _modal = document.getElementById('exampleModal');

const openModal = () => {
  _modal.style.display = 'block';
  _modal.classList.add('show');
}

window.addEventListener('keyup', (e) => {
  const charCode = (e.which) ? e.which : e.keyCode;
  _tmp.push(String.fromCharCode(charCode));
  if (_tmp.length > 3) _tmp.shift();
  if (_tmp.join('') === '420') openModal();
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="nofollow" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        You made it!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

0

171

Open popup-modal when function gets called Javascript

1 answers

0

Find remote jobs

Andres GPT