Cannot close modal when replacing bootstrap 4 to 5

Question

Bootstrap modal work perfectly on bootstrap version 4, but when i change to use bootstrap version 5, then the modal cannot close when i click "Close" button.

//When I use this v4, modal works perfectly :

<script src="assets/vendor/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>

//BUT When I use this v5, then the close button cannot close the modal :

<script src="assets/vendor/bootstrap-5/js/bootstrap.bundle.min.js"></script>

Here is my codes :

<a href="javascript:void(0)" onclick="get_user_details('<?php echo $Res['customer_id']; ?>')" >

<div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content" id="UserModalContent">
            
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" 
            </div>
        </div>
    </div>
</div>
    
<script>
    function get_user_details(user_id)
    {
        parameters="user_id="+user_id;
        $.ajax({
            type: "POST",
            url: "<?php echo site_url('hungry/get_modal_view_tree_member_data'); ?>",
            data: parameters,
            cache: false,
            success:function(data)
            {
                $("#UserModalContent").html(data);
                $("#MyPopup").modal('show');
                
            }
        });
    }
</script>

I have check all Z-index, confirm it is not Z-index problem. Any idea?

score 1 · Answer 1 · answered Sep 30 '21 at 06:31

Google search found this solution : https://github.com/twbs/bootstrap/discussions/32347

New Way

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Old Way

<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>

I just replace my old "Close" button with new way, and all problem is solve. Cheer.

Cannot close modal when replacing bootstrap 4 to 5

1 Answers1