Modal becomes gray after migrating from Bootstrap 4 to 5-CodePudding

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  id="imagemodal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div >
      <div >
        <div >
          <button type="button"  data-dismiss="modal"><span aria-hidden="true">&times;</span><span >Zamknij</span></button>
          <h4  id="myModalLabel">Podgląd</h4>
        </div>
        <div >
          <!-- <img src="" id="imagepreview" style="width: 400px; height: 264px;" > -->
          <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
        </div>
        <div >
          <button type="button"  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
});

CodePudding user response：

Change the data- attributes to data-bs- as explained in Javascript section inside the list of migration changes in bootstrap 5 (https://getbootstrap.com/docs/5.0/migration/).