I made a popup alert using Sweetalert2. I want to be able to use the arrowkeys to choose between accept and deny. However, it also affects the site itself, it's scrolling in the background. I added the code (right and left arrow keys affect the background too). The scrollbars are hidden in the site, so I am assuming it has to do with that in some way.
What can I do so the arrows only affect the choice? The table is only there in the code to get the site wide enough to be scrollable for the example.
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>Unset styles from html by replacing html, body { with body {