'Bootstrap v5 modal show issue

I decided to go ahead and update my site to the latest version of Bootstrap, version 5.0 and am having difficulty getting modals to work. Reading the migration guide said nothing about breaking modals and my site worked perfectly before. My code uses javascript/jQuery to fire off the modal after the ajax loads the text. The ajax part still works fine, but it's not firing the modal after it retrieves it. I'm using the latest bootstrap.bundle.min.js.

$( document ).ready(function() {
$('.hourModal').click(function(){
    var obj_id = $(this).data('id');
    $.ajax({
        url: 'ajax-multi.php',
        type: 'POST',
        data: {obj_id: obj_id,role:'some_role'},
        //dataType: 'html',
        success: function(response){ 
            $('.modal-body').html(response);
            //$('#hourModal').modal('show'); //Old way that worked great
            var hourModal = new bootstrap.Modal(document.getElementById('hourModal'));
            hourModal.show(); // New way I tried from the Bootstrap documentation
        }
    });
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

<!-- Button -->
<button type="button" class="btn btn-secondary btn-sm py-0 me-1 hourModal" data-id="1">Blocks</button>

<!-- Modal -->
<div class="modal fade" id="hourModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Object Times</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The error I get is: Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".

Any help is greatly appreciated!

UPDATE: As described below, I had to move bootstrap.min.js to the end of the page, after </body> and leave where I call jquery.min.js at the top in the header. Anyone have any idea why it has to be done this way?

Solution 1:^[1]

Move your <script> with bootstrap at the end of the <body>. It fixed my Bootstrap 5 modal issue.

Solution 2:^[2]

This issue is fixed in currently available 5.0.1

Solution 3:^[3]

I had the same problem. I called jquery.js and bootstrap.js at the end of the html and before /body and it worked correctly.

Solution 4:^[4]

UPDATE:

Fixed in Bootstrap 5.0.1

I had the same problem. The only difference I use Webpack to build.

If you want to load your scripts from head section you can try to add async option.

This fixed the issue for me.

<script src="..." async="async"></script>

Solution 5:^[5]

mamantoha's suggestion seems to be the better way to handle this since it doesn't require moving the outside the section, and some people may have dependencies that require bootstrap to be loaded ahead of other scripts in the section.

Solution 6:^[6]

In bootstrap 4 or 5 you maybe forgetting the '#' in

data-bs-target="#exampleModal"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	kastenieks
Solution 2	G-Unit
Solution 3	Kenedy Morais
Solution 4
Solution 5	Ed Gonzalez
Solution 6	caner

'Bootstrap v5 modal show issue

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]