Question

我有一个简单的模态弹出窗口。关闭后，您将返回页面顶部。我希望它保持在相同的滚动位置。这是可能的，我对Javascript不是很好。

以下是页面：http://pagedev.co.uk/hoppings/product/2-4m-beads

这是我的javascript：

$(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(1000, 1);
    //$(".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();

});

Answer 1

您需要像在开放链接上一样阻止关闭链接的默认操作：

$(".js-modal-close, .modal-overlay").click(function(e) {
  e.preventDefault();
  $(".modal-box, .modal-overlay").fadeOut(500, function() {
    $(".modal-overlay").remove();
  });
});

Answer 2

这是因为您使用href='#'

<a class="js-open-modal" href="#" data-modal-id="12" onclick="ga('send', 'event', 'PDF Download', 'Link Click', 'Q-Line 2.4m D Mould');"><div class="product-hover"></div></a>

你可以在javascript中阻止它

$(".js-modal-close, .modal-overlay").click(function(e) {
   e.preventDefault();
   $(".modal-box, .modal-overlay").fadeOut(500, function() {
       $(".modal-overlay").remove();
   });
}

关闭模态窗口 - 返回页面顶部

2 个答案: