Handeling keydown events only in top layer of html

I'm working on a webapplication, where I have an underlying html file with some JS functionality, that I can't interfer with. Via JS, I create a layer above that page with z-index: 1000; in my css. Now I need some inputs, but my keydown events must not interact with the "page" underneath.

My idea was to work with something like:

$(document).keydown(function (e) {
  e.stopImmediatePropagation();
  e.preventDefault();
  return false;
});

This should, in my understanding, stop the event from triggering. But it also disables the input in my overlay.

Is there a possibility to only accept key inputs in a <textarea> but not trigger keydown events in the underlying page?

Thanks for any suggestions.

Code:

.html

standard html with <head> and <body>, that I don't want to interact with, because it's an 10 year old software running in the manufacturing in my company.

.js

function createModal() {
  return '<div class="modal" tabindex="-1">
<div class="modalContainer">
     <div class="modalHeader">Störmeldungen<span id="closeModal" class="btn" style="float: right">X</span></div>
     <div class="modalBody"><div class="btn" id="btnHistory">Verlauf anzeigen</div><div class="btn btnNewMessage">Neue Meldung absetzen</div></div></div></div>
</div>';
}

function inputMessage() {
  return (
    '<div id="customMessage">
         <div id="textInput"><label for="description" id="inputLabel">Um was für ein Problem handelt es sich?</label><br><textarea id="description" placeholder="Bitte beschreiben Sie den Fehler"></textarea></div>' +
        '<div class="checkBox"><label for="localSupport">Ich benötige Hilfe vor Ort</label><input type="checkbox" id="localSupport"></div>' +
        '<div class="checkBox"><label for="noKeyboard">Ich verfüge nicht über eine Tastatur</label><input type="checkbox" id="noKeyboard"></div>' +
        '<div class="btn" id="sendMessage">Störmeldung absetzen</div>
    </div>'
  );
}

$("body").prepend(createModal());
$(".modalContainer").append(createMessage());
$(".secondModal .modalBody").append(inputMessage());

.css

.modal {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;

.modal .modalContainer {
  margin: 5% auto;
  width: 75%;
  height: 80%;
  box-sizing: border-box;
  position: relative;
  border: 2px solid black;
}
}