0

Mi proyecto es de una pagina web única que despliega o abre un menú de tipo overlay, el cual cubre toda la pantalla, al ser un proyecto destinado preferentemente a dispositivos móviles.

Necesito que al dar el botón "atrás o volver" del dispositivo móvil cierre el menú y no cierre la pagina o se salga. Abra alguna forma de interrumpir la acción del botón "atrás o volver" del dispositivo móvil para designar la función de cerrar el menú.

Espero y me ayuden saludos

3
  • 1
    Lea por favor Cómo preguntar y como redactar un ejemplo mínimo verificable
    – user128299
    el 31 oct. 2022 a las 17:02
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 31 oct. 2022 a las 17:53
  • Prueba modificando el historial
    – Triby
    el 31 oct. 2022 a las 18:41

1 respuesta 1

1

Lo primero que debes hacer, es agregar un nuevo estado al historial, el cual funciona como una Pila. Esto te permitirá retroceder al estado original

history.pushState(null , null, "#nombredelmodal")

Si te fijas se ingresó un nuevo estado, que tiene una nueva URL, cual será algo así: http://mipagina.com/#nombredelmodal

He utilizado un hash para poder utilizar el evento hashchange, el cual detectará cualquier cambia en el hash de la URL

window.addEventListener('hashchange',ReadHash, false);
function ReadHash() {
    if (location.hash === '') {
        // cierro modal
    }
    else {
        // abro modal
    }
}

Dejo un ejemplo completo usando bootstrap

function PushState(modal) {
    history.pushState(null , null, modal)
    return true;
}

window.addEventListener('hashchange',ReadHash, false);
function ReadHash() {
    if (location.hash === '') {
        bootstrap.Modal.getInstance(document.querySelector(".modal")).hide();
    }
    else {
        var myModal = new bootstrap.Modal(document.querySelector(location.hash));
        myModal.show();
    }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="return PushState('#exampleModal')">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <button onclick="history.back()">history.back()</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.