Tengo un modal de pantalla completa en mi aplicación con una entrada de búsqueda. Me gustaría cerrar este modal cuando hago clic fuera de cualquier lugar que no sea el botón de entrada o de búsqueda. Yo uso Bootstrap. Cómo puedo hacer esto ?
Intento cosas diferentes y gracias por la ayuda.
#searchModal { padding-top: 6rem; background-color: rgba(179, 179, 179, 0.79); } .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } .bg-transparent { --bs-bg-opacity: 1; background-color: transparent !important; } <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="btn btn-primary search" href="#" data-bs-toggle="modal" data-bs-target="#searchModal"> search </a> <div class="modal fade" id="searchModal" data-bs-backdrop="false"> <div class="modal-dialog modal-fullscreen"> <div class="modal-content bg-transparent"> <div class="modal-body container-xxl"> <div class="row justify-content-center align-items-center"> <div class="col col-lg-8"> <form> <div class="position-relative"> <input type="search" class="form-control fw-light" placeholder="Search…"/> <button type="submit" class="btn btn-link"> SEARCH </button> </div> </form> </div> <div class="col-auto"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close"> CLOSE </button> </div> </div> </div> </div> </div> </div>