Hice una alerta emergente usando Sweetalert2. Quiero poder usar las teclas de flecha para elegir entre aceptar y rechazar. Sin embargo, también afecta al sitio en sí, se desplaza en segundo plano. Agregué el código (las teclas de flecha derecha e izquierda también afectan el fondo). Las barras de desplazamiento están ocultas en el sitio, así que supongo que tiene que ver con eso de alguna manera.
¿Qué puedo hacer para que las flechas solo afecten la elección? La tabla solo está en el código para que el sitio sea lo suficientemente ancho como para que se pueda desplazar en el ejemplo.
Swal.fire({ width: '16rem', title: 'CALL!', text: "Take call?", showDenyButton: true, showCancelButton: false, confirmButtonColor: '#353535', denyButtonColor: '#353535', confirmButtonText: 'Yes', denyButtonText: 'No', allowOutsideClick: false, keydownListenerCapture:true, stopKeydownPropagation:true }) .swal2-popup .swal2-styled:focus { opacity: 1!important; background-color: #6D9E18!important; color: white!important; box-shadow:none!important; } .swal2-styled .swal2-confirm:focus { opacity: 1!important; background-color: #6D9E18!important; color: white!important; box-shadow:none!important; } .swal2-styled.swal2-default-outline:focus{ opacity: 1!important; background-color: #6D9E18!important; color: white!important; box-shadow:none!important; } .swal2-actions:not(.swal2-loading) .swal2-styled:hover{ opacity: 1!important; background-color: #6D9E18!important; color: white!important; box-shadow:none!important; } html, body{ background-color: #353535; color : #FCFCFC; font-family: 'Quicksand'; font-weight : 700; font-size : 4.5vh; border-width: 0px; border: none; height: 100%; width: 100%; box-sizing: border-box; padding: 0px; -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ overflow-y: scroll; } body::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <table width="2000px"> <tr> <td>djwaodjsakdjlsakdjsalkdjsalkdjalksfhuebgnmsdvbmncxbvmcxbvhkbmdnbvmnxcbvmnxcbvmncxbvmnxcbvnmcxbvkjadbvdbvhsdbvkdsvbhds</td> </tr> </table>Quitar estilos de html reemplazando html, body { con body {