laimas,
рони, Цитата:
$("html").css("overflow","hidden").css("padding-right","17px"); Ведь не у всех браузеров полоса прокрутки = 17px, особенно у мобильных. |
Цитата:
https://getbootstrap.ru/docs/v4-alpha/components/modal/ |
Проще вернуться к восстановлению позиции без запрещения прокрутки, почему у вас не работает не понять, но все должно.
<!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> |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Проверь сам: var scl = $(window).scrollTop(); console.log(scl); при самом скроле значение не меняются Поэтому и просил функцию помочь применить... |
Цитата:
$(this).data({top: $(window).scrollTop()}) запоминает позицию прокрутки на момент открытия модалки и сохраняет ее в самой модалке. Что пользователю охота, смотреть содержимое модалки или скролить страницу, это модалке боком. После закрытия окна, это (window).scrollTop($(this).data('top')) получает сохраненную позицию и прокручивает страницу к ней. А вам чего хочется - раскрыть модалку, крутить скролл, запоминая его, чтобы потом получить последнюю позицию? А смысл, она и так будет на ней. И вообще в чем тогда смысл окна модального? |
Цитата:
Что-то не работает. Я заморочился из-за того, что у меня при открытии модального окна не удалялась полоса прокрутки, контент прокручивался. Решил сделать чтобы не прокручивался контент страницы, а блокировался в текущем положении, при этом чтобы не смещалось тело вправо. Нашел способ с помощью fixed. Но при этом при открытии модального окна страница стала прокручиваться в top: 0. Поэтому, решил определять значение скролла - на сколько страница прокручена вниз и добавлять его отрицательное значение в top:. Например, на 1200px вниз, то добавлять top:-1200px. var scl = $(window).scrollTop();//определяем значение скрола, например, определилось 1200 var scrtop = "-"+scl+"px";//добавляем - и px, получается -1200px //функция определения открытия модального окна $(document).on("shown.bs.modal", ".modal", function () { $("body").css("position","fixed").css("top", scrtop);// фиксируем body и делаем top:-1200px }); //функция определения закрытия модального окна $(document).on("hidden.bs.modal", ".modal", function () { $("body").removeAttr("style").removeAttr("class"); //удаляем атрибуты style и class $(window).scrollTop(scl);//остаемся на той позиции, которая была при открытии окна, то есть .scrollTop(1200) }); Но это работает только если проскролить вниз, после нажать F5 - обновить страницу. Тогда при закрытии модального окна позиция тела остается как при открытии окна. Вот эта функция определяет сразу при скроле значение $(window).on("scroll", function() { $(window).scrollTop(); }); Если бы как-то значение (результат выполнения) этой функции можно бы использовать за ее пределами, об этом я и просил по большому счету. То есть чтобы использовать результат выполнения функции в функциях открытия и закрытия модального окна. |
Часовой пояс GMT +3, время: 03:13. |