Leí este artículo: Detector de clics en el botón Atrás del navegador JavaScript o jQuery
Y probé todos los ejemplos allí para usar el botón Atrás del navegador para ocultar una superposición.
Este es el mejor intento de trabajo:
$("button").click(function() { $("#overlay").css("display", "block"); }); window.onpopstate = function() { $("#overlay").css("display", "none"); }; history.pushState({}, ''); * { font-family: sans-serif; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> <button>Click me</button> <div id="overlay">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> Si hace clic en el button y luego usa el botón Atrás del navegador, la superposición se desvanece. Así lo espero. Pero: Funciona solo una vez, por la razón que sea. ¿Por qué? ¿Cómo puedo dejar que funcione para cada caso?
Estaría muy agradecido por la ayuda!
Debe usar pushState cada vez que se abre la ventana emergente:
$("button").click(function() { history.pushState({}, ''); $("#overlay").css("display", "block"); }); window.onpopstate = function() { $("#overlay").css("display", "none"); };