tengo un problema divertido en bootstrap 5.0.2
Tengo que hacer doble clic en el botón (data-bs-dismiss) para cerrar el modal
Nota importante:Uso muchos modales en la página, pero se abren según la necesidad
<div class="modal" id="open-rating-modal-for-order" tabindex="-1" aria-labelledby="open-call-modal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form method='POST' onsubmit="return validate_rating_modal()"> <input type='hidden' name='page' value='submit-rate' /> <input type='hidden' name='csrf_token' value="{$csrf_token}" /> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> rates </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> </div> </div> </div>Acabo de aplicar el estilo de clase de fade al primer contenedor y agregué un elemento <button> para activar el modal para que apareciera y funcionó correctamente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="d-grid gap-2"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#open-rating-modal-for-order"> Open Modal </button> </div> <div class="modal fade" id="open-rating-modal-for-order" tabindex="-1" aria-labelledby="open-call-modal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form method='POST' onsubmit="return validate_rating_modal()"> <input type='hidden' name='page' value='submit-rate' /> <input type='hidden' name='csrf_token' value="{$csrf_token}" /> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> Rates </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> </form> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> </html>