Показать сообщение отдельно
  #13 (permalink)  
Старый 01.12.2019, 10:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Проще вернуться к восстановлению позиции без запрещения прокрутки, почему у вас не работает не понять, но все должно.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
    margin: 0;
}
.overlap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000055;
    z-index: 100;
}
.modal {
    position: fixed;
    width: 400px;
    height: 200px;
    top: -200px;
    left: 50%;
    margin-left: -200px;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
}
</style>
<script type="text/javascript">
$(function() {
    for(var i=1; i < 80; ++i) $('body').append('<p>'+i+'</p>');
    $('html').animate({
        scrollTop: 500
    }, 500, function() {
        $('<div class="overlap"><div class="modal"><button>Close</button></div></div>')
            .appendTo('body')
            .find('.modal')
            .animate({top: 0}, 500, function() {
                $(this).data({top: $(window).scrollTop()}) //запомнить позицию прокрутки
            })
            .find('button').click(function() {
                $(this).parent().animate({top: -200}, 500, function() {
                     $(window).scrollTop($(this).data('top')) //восстановить позицию прокрутки  
                    $(this).parent().remove()
                })
            })
    });
});
</script>
</head>
<body>
</body>
</html>
Ответить с цитированием