关闭模式窗口 - 返回页面顶部答案

【问题标题】：Closing modal window - returns to the top of page关闭模式窗口 - 返回页面顶部
【发布时间】：2016-08-17 18:43:41
【问题描述】：

我有一个简单的模态弹出窗口。关闭时会返回页面顶部。我希望它保持在相同的滚动位置。这可能吗，我不擅长 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();

});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

【解决方案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();
   });
}

【讨论】：