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

标签 javascript jquery html css

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

});

最佳答案

您需要防止像打开链接时那样执行关闭链接的默认操作:

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

关于javascript - 关闭模式窗口 - 返回页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38994144/

相关文章:

javascript - 说话人识别 API 识别配置文件 - 创建注册 : How to record audio in the specified format from web page?

javascript - 将 onLoad 与 .each() 一起使用时出现问题

javascript - Jquery Slider 在 Fiddle 中工作但在浏览器中不工作,给出错误

java - 如何在 Android 中使用 Jsoup 访问 HTML 数据中具有不同 idname 的内部相同类名 div

javascript - 获取未知图像的大小并更改类别

javascript - 显示/隐藏固定菜单 (jQuery)

javascript - 调整大小时如何计算图像的宽度和高度值?

jquery - 如何更改 jquery.ui selectmenu 的字体或大小?

html - ionic 导航按钮未显示在右侧

javascript - react : How to move function outside of component body