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.