Tengo un cuadro modal emergente. Cuando se hace clic en el botón Cerrar, la página se desplaza de nuevo a la parte superior de la ventana. ¿Cómo puedo hacer que la página permanezca en su posición después de hacer clic en el botón Cerrar?

Aquí está el jquery que uso para el cuadro modal. La demostración completa se puede encontrar aquí: https://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html

 $(function(){ var appendthis = ("<div class='modal-overlay js-modal-close'></div>"); $('a[data-modal-id]').click(function(e) { e.preventDefault(); $("body").append(appendthis); $(".modal-overlay").fadeTo(500, 0.7); //$(".js-modalbox").fadeIn(500); var modalBox = $(this).attr('data-modal-id'); $('#'+modalBox).fadeIn($(this).data()); }); $(".js-modal-close, .modal-overlay").click(function() { $(".modal-box, .modal-overlay").fadeOut(500, function() { $(".modal-overlay").remove(); }); }); $(window).resize(function() { $(".modal-box").css({ top: ($(window).height() - $(".modal-box").outerHeight()) / 2, left: ($(window).width() - $(".modal-box").outerWidth()) / 2 }); }); $(window).resize(); });

Aquí está el html que uso para el cuadro modal.

 <div id="popup" class="modal-box" style="display:none;"> <header> <a href="#" class="js-modal-close close">×</a> <h3>Modal Title</h3> </header> <div class="modal-body"> <p>Modal Body</p> </div> <footer> <a href="#" class="js-modal-close">Close Button</a> </footer> </div>

Gracias por tu tiempo y ayuda.