Modal becomes gray after migrating from Bootstrap 4 to 5

I've just relinked my Bootstrap 4.1 to Bootstrap 5 and my modal stopped to work. I mean when my modal is opened it becomes grayed and i am nto able to click button or exit from it. What should i change this to work in Bootstrap 5?

This is my code:

Modal:

<!-- Creates the bootstrap modal where the image will appear -->
  <div class="modal fade" id="imagemodal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zamknij</span></button>
          <h4 class="modal-title" id="myModalLabel">Podgląd</h4>
        </div>
        <div class="modal-body">
          <!-- <img src="" id="imagepreview" style="width: 400px; height: 264px;" > -->
          <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

JS:

$("#pop").on("click", function() {
  $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
  $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});