Cómo cerrar una capa modal con el botón Volver del navegador

Estoy maquetando una página que abre una ventana modal (a pantalla completa).

Si pulsamos sobre “Ecommerces”, “Proveedores” o “Ponente” nos aparece un modal con el menú. El botón para cerrar el modal es una flecha. Hemos detectado que un buen número de usuarios pulsa el botón Volver del navegador, y como seguimos en la misma página el usuario se salía de nuestro sitio web.

Las funciones history.pushState e history.replaceState permiten modificar el historial del navegador.

Añadiendo el hash #home a la url podremos detectar si el usuario ha utilizado el botón Volver. Cerramos el modal y eliminamos el hash #home de la url.

La detección del hash #home se realiza con window.onpopstate (necesaria porque el navegador no recarga la página).

// Prevents back button on layer to exit the web

function fnChangeHistory( ) {
// execute on modal showed
    history.pushState( null , null, ‘index.html#home’ );
history.pushState( null , null, ‘index.html#layer’ );
}

window.onpopstate = function( ) {
// capture #home and close modal
    if( window.location.hash == “#home” ) {
        ... code for closing modal ...
        history.replaceState( null , null, ‘index.html’ );
}
};

Otra opción sería cerrar todos los modales si no hay hash en la url.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.