Tengo una función que detecta el teclado de los usuarios, y cuando el usuario escribe la combinación de 4 2 0 en su teclado, estoy tratando de abrir una ventana emergente.
<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">×</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"); }) };entiendo que el
this.modal("show");está mal, pero no sé qué poner ahí.
Puedes usar Bootstrap y Vanilla.js para hacerlo.
Bootstrap 5 ya no necesita jQuery como dependencia, ya que JavaScript puede proporcionar la misma funcionalidad.
p.ej
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">×</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>