{"id":310112,"date":"2020-09-18T09:00:11","date_gmt":"2020-09-18T09:00:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=310112"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=310112","title":{"rendered":"\u0414\u0435\u043b\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430. \u0417\u0430\u0431\u043e\u0442\u0438\u043c\u0441\u044f \u043e\u0431 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0435 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/519662\/\">\n<p>\u042f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0430\u0439\u0442\u043e\u0432. \u041f\u043e\u0447\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b, \u0431\u044b\u043b\u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u044b \u0437\u0430\u043a\u0430\u0437\u0430 \u0437\u0432\u043e\u043d\u043a\u0430 \u0432 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430\u0445, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432, \u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412\u0451\u0440\u0441\u0442\u043a\u0430 \u0442\u0430\u043a\u0438\u0445 \u043e\u043a\u043e\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0431\u0435\u0437 \u043f\u043e\u043c\u043e\u0449\u0438 JS \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0448\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS, \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043e\u043d\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438, \u0438 \u0438\u0437-\u0437\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043d\u0435\u0434\u043e\u0447\u0435\u0442\u043e\u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u044e\u0442 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0435\u0439 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7p\/_m\/ak\/7p_mak5it82clg_a1hqef00nhpg.jpeg\"\/><\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, JavaScript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<ul>\n<li>Arctic Modal,<\/li>\n<li>jquery-modal,<\/li>\n<li>iziModal,<\/li>\n<li>Micromodal.js,<\/li>\n<li>tingle.js,<\/li>\n<li>Bootstrap Modal (\u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Bootstrap) \u0438 \u0434\u0440.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>(\u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 Frontend-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432)<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0438\u0437 \u043d\u0438\u0445 \u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0430\u043c, \u043d\u043e \u043f\u043e\u0447\u0442\u0438 \u0443 \u0432\u0441\u0435\u0445 \u043d\u0430\u0445\u043e\u0434\u0438\u043b \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 jQuery, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0435\u0441\u0442\u044c \u043d\u0435 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043c\u044b \u0436\u0434\u0451\u043c \u043e\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d? \u041e\u0442\u0432\u0435\u0447\u0430\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u044f \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u00ab<a href=\"https:\/\/www.youtube.com\/watch?v=s6PI8pKQxgo\">\u0417\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c, \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e<\/a>\u00bb \u0410\u043d\u043d\u044b \u0421\u0435\u043b\u0435\u0437\u043d\u0451\u0432\u043e\u0439, \u0430 \u0442\u0430\u043a-\u0436\u0435 \u043d\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0440\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/habr.com\/ru\/users\/nikox\/\" class=\"user_link\">NikoX<\/a> \u00ab<a href=\"https:\/\/habr.com\/ru\/post\/149109\/\">arcticModal \u2014 jQuery-\u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d<\/a>\u00bb.<\/p>\n<p>  <\/p>\n<p><strong>\u0418\u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0432\u0438\u0434\u0435\u0442\u044c?<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li>\u041e\u043a\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0431\u0435\u0437 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435.<\/li>\n<li>\u041f\u043e\u0434 \u043e\u043a\u043d\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0432\u0435\u0440\u043b\u0435\u0439. \u041a\u043b\u0438\u043a\/\u0442\u0430\u043f \u043f\u043e \u043e\u0432\u0435\u0440\u043b\u0435\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u043e.<\/li>\n<li>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0434 \u043e\u043a\u043d\u043e\u043c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/li>\n<li>\u041e\u043a\u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043b\u0438\u043a\u043e\u043c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 <em>data<\/em>-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u044b\u0431\u0435\u0440\u0435\u043c.<\/li>\n<li>\u041e\u043a\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u043c \u2013 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u043c. <\/li>\n<li>\u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u0444\u043e\u043a\u0443\u0441\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u043e\u043a\u043d\u0430 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e.<\/li>\n<li>\u0414\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 IE11+<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440:<\/em> \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438, \u0441\u0440\u0430\u0437\u0443 \u0434\u0430\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (HystModal) \u043d\u0430 <a href=\"https:\/\/github.com\/AddMoreScripts\/hystModal\">GitHub<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 <a href=\"https:\/\/addmorescripts.github.io\/hystModal\/index_ru.html\">\u0434\u0435\u043c\u043e+\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"1-razmetka-html-i-css\">1. \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 HTML \u0438 CSS<\/h2>\n<p>  <\/p>\n<h3 id=\"11-karkas-modalnyh-okon\">1.1. \u041a\u0430\u0440\u043a\u0430\u0441 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d<\/h3>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u043a\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e? \u0421\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435: \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u0440\u0430\u0437\u0443 \u0432 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0417\u0430\u0442\u0435\u043c \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c\/\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043e\u043a\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 CSS.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0431\u0440\u043e\u0441\u0430\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 HTML (\u044f \u043d\u0430\u0437\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u00abhystmodal\u00bb):<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;hystmodal&quot; id=&quot;myModal&quot;&gt;     &lt;div class=&quot;hystmodal__window&quot;&gt;         &lt;button data-hystclose class=&quot;hystmodal__close&quot;&gt;Close&lt;\/button&gt;           \u0422\u0435\u043a\u0441\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043e\u0448\u043a\u0430.         &lt;img src=&quot;img\/photo.jpg&quot; alt=&quot;\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043e\u043a\u043d\u0435&quot; \/&gt;     &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c <code>&lt;\/body&gt;<\/code> \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u0441 \u043e\u043a\u043d\u043e\u043c (<code>.hystmodal<\/code>). \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u043d\u043e\u043c. \u0423\u0434\u043e\u0431\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 id (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>#myModal<\/code>) \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043e\u043a\u043d\u0443 (\u0432\u0435\u0434\u044c \u0438\u0445 \u0443 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e).<\/p>\n<p>  <\/p>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b <code>.hystmodal<\/code> \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0432\u0441\u0451 \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u043b \u0441\u043e\u0431\u043e\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 CSS \u0438 \u043f\u0440\u0438\u0440\u0430\u0432\u043d\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 top, bottom, left \u0438 right \u043a \u043d\u0443\u043b\u044e.<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal {     position: fixed;     top: 0;     bottom: 0;     right: 0;     left: 0;     overflow: hidden;     overflow-y: auto;     -webkit-overflow-scrolling: touch;     display: flex;     flex-flow: column nowrap;     justify-content: center; \/* \u0441\u043c. \u043d\u0438\u0436\u0435 *\/     align-items: center;     z-index: 99;     \/* \u0427\u0442\u043e\u0431\u044b \u043e\u043a\u043d\u043e \u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u043b\u043e \u043a \u0433\u0440\u0430\u043d\u0438\u0446\u0435     \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b *\/     padding:30px 0; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0435\u0449\u0451 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>.hystmodal<\/code> \u0432 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/li>\n<li>\u041e\u043a\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c <code>overflow-y: auto<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u043f\u043e\u043b\u043e\u0441\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u0422\u0430\u043a\u0436\u0435, \u0434\u043b\u044f \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043b\u044f Safari) \u043d\u0430\u043c \u0441\u0442\u043e\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>-webkit-overflow-scrolling: touch<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u0430 \u043d\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u043e\u043a\u043d\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal__window {     background: #fff;      \/* \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0448\u0438\u0440\u0438\u043d\u0443 600px     \u043d\u043e \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 *\/     width: 600px;     max-width: 100%;      \/* \u0417\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 *\/     transition: transform 0.15s ease 0s, opacity 0.15s ease 0s;     transform: scale(1); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21161.<\/strong> \u0415\u0441\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043e\u043a\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043e\u043a\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0435\u0437\u0430\u043d \u0441\u0432\u0435\u0440\u0445\u0443.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/a-\/st\/3k\/a-st3kirmksrg5fakkymeyqi9j4.png\"\/><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0438\u0437-\u0437\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>justify-content: center<\/code>. \u041e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 (\u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438), \u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0435\u0433\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/33454533\/cant-scroll-to-top-of-flex-item-that-is-overflowing-container\">\u043d\u0430 stackoverflow<\/a>. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2013 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <code>justify-content: flex-start<\/code>, \u0430 \u043f\u043e\u0442\u043e\u043c\u043a\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <code>margin:auto<\/code>. \u042d\u0442\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21162.<\/strong> \u0412 ie-11 \u0435\u0441\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043e\u043a\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u043e \u0444\u043e\u043d \u043e\u043a\u043d\u0430 \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <code>flex-shrink:0<\/code> \u043f\u043e\u0442\u043e\u043c\u043a\u0443 \u2013 \u0442\u043e\u0433\u0434\u0430 \u043e\u0431\u0440\u0435\u0437\u043a\u0438 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21163.<\/strong> \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043a\u0440\u043e\u043c\u0435 Chrome \u043d\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043e\u0442 \u043d\u0438\u0436\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043a\u043d\u0430 (\u0442.\u0435. padding-bottom \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b).<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u0430\u0433 \u044d\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>::after<\/code> \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438 \u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432\u043c\u0435\u0441\u0442\u043e padding<\/li>\n<li>\u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0438 \u0434\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0443\u0436\u0435 \u0435\u043c\u0443.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u0442\u043e\u0440\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 <code>.hystmodal__wrap<\/code>. \u0422\u0430\u043a \u043c\u044b \u0437\u0430\u043e\u0434\u043d\u043e \u043e\u0431\u043e\u0439\u0434\u0451\u043c \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u21161, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e padding \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c margin-top \u0438 margin-top \u0443 \u0441\u0430\u043c\u043e\u0433\u043e <code>.hystmodal__window<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 html:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;hystmodal&quot; id=&quot;myModal&quot; aria-hidden=&quot;true&quot; &gt;     &lt;div class=&quot;hystmodal__wrap&quot;&gt;         &lt;div class=&quot;hystmodal__window&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; &gt;             &lt;button data-hystclose class=&quot;hystmodal__close&quot;&gt;Close&lt;\/button&gt;               &lt;h1&gt;\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430&lt;\/h1&gt;             &lt;p&gt;\u0422\u0435\u043a\u0441\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 ...&lt;\/p&gt;             &lt;img src=&quot;img\/photo.jpg&quot; alt=&quot;\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435&quot; width=&quot;400&quot; \/&gt;             &lt;p&gt;\u0415\u0449\u0451 \u0442\u0435\u043a\u0441\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 ...&lt;\/p&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u0434 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 aria \u0438 role \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 CSS \u0434\u043b\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438 \u043e\u043a\u043d\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal__wrap {     flex-shrink: 0;     flex-grow: 0;     width: 100%;     min-height: 100%;     margin: auto;     display: flex;     flex-flow: column nowrap;     align-items: center;     justify-content: center; } .hystmodal__window {     margin: 50px 0;     flex-shrink: 0;     flex-grow: 0;     background: #fff;     width: 600px;     max-width: 100%;     overflow: visible;     transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;     transform: scale(0.9);     opacity: 0; }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"12-skryvaem-okno\">1.2 \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043e\u043a\u043d\u043e<\/h3>\n<p>  <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448\u0435 \u043e\u043a\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u043d\u043e. \u041a\u043e\u0433\u0434\u0430 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043e \u0441\u043a\u0440\u044b\u0442\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0443\u043c \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f none \u0434\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f flex. <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0430\u0441 \u043d\u0435 \u0443\u0441\u0442\u0440\u043e\u0438\u0442, \u0432\u0435\u0434\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u043d\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0412\u0441\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 transition, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443\u0442.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>visibility:hidden<\/code>. \u041e\u043d\u043e \u0441\u043a\u0440\u043e\u0435\u0442 \u043e\u043a\u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u0445\u043e\u0442\u044f \u0438 \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e. \u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u043e\u043a\u043d\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043c\u0435\u044e\u0442 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435<br \/>  \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2013 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0440\u044b\u0442\u044b \u0438 \u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 <code>visibility:hidden<\/code> \u043d\u0435\u043b\u044c\u0437\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u0430 \u043e\u0442 \u0441\u043a\u0440\u0438\u043d-\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u043c\u044b \u0443\u0436\u0435 \u0441\u043a\u0440\u044b\u043b\u0438 \u043e\u043a\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>aria-hidden=&quot;true&quot;<\/code>. <\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043e\u043a\u043d\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal--active{     visibility: visible; } .hystmodal--active .hystmodal__window{     transform: scale(1);     opacity: 1; }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"13-oformlenie-podlozhki\">1.3 \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0412 \u043b\u0443\u0447\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0432\u0435\u0440\u043b\u0435\u044f. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u043c\u0435\u044e\u0449\u0438\u0439\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 .hystmodal \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0432\u0435\u0440\u043b\u0435\u044f, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 opacity) \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0412 \u0438\u0442\u043e\u0433\u0435, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043e\u043a\u043d\u0430 \u0438 \u043e\u0432\u0435\u0440\u043b\u0435\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>.hysymodal__shadow<\/code> \u043f\u0440\u044f\u043c\u043e \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435 <code>&lt;\/body&gt;<\/code>. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 js \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0415\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal__shadow{     position: fixed;     border:none;     display: block;     width: 100%;     top: 0;     bottom: 0;     right: 0;     left: 0;     overflow: hidden;     pointer-events: none;     z-index: 98;     opacity: 0;     transition: opacity 0.15s ease;     background-color: black; } \/* \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0430 *\/ .hystmodal__shadow--show{     pointer-events: auto;     opacity: 0.6; }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"14-otklyuchenie-prokrutki-stranicy\">1.4 \u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0434 \u043d\u0438\u043c \u043d\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c.<br \/>  \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u2014 \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c overflow:hidden \u0434\u043b\u044f body \u0438\u043b\u0438 html, \u043a\u043e\u0433\u0434\u0430 \u043e\u043a\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u0441 \u044d\u0442\u0438\u043c \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430:<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21164.<\/strong> \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Safari \u043d\u0430 iOS \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0430 \u0442\u0435\u0433 html \u0438\u043b\u0438 body \u043f\u043e\u0432\u0435\u0448\u0435\u043d <code>overflow:hidden<\/code>.<br \/>  \u0420\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u043b\u0438\u0431\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 (touchmove, touchend \u0438\u043b\u0438 touchsart) \u0438\u0437 js \u0432\u0438\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">targetElement.ontouchend = (e) =&gt; {     e.preventDefault(); };<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0441\u0430\u043c\u043e\u0433\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043a\u043d\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442. \u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438\u0437 js, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442.<\/p>\n<p>  <\/p>\n<p><em>ps:<\/em> \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/FL3NKEY\/scroll-lock\">scroll-lock<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043e \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043d\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2013 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043e \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043d\u0430 CSS. \u041f\u0443\u0441\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043e\u043a\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;html&gt;<\/code> \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <code>.hystmodal__opened<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal__opened {     position: fixed;     right: 0;     left: 0;     overflow: hidden; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f <code>position:fixed<\/code>, \u043e\u043a\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u0436\u0435 \u0432 safari, \u043e\u0434\u043d\u0430\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u0442\u043e\u0436\u0435 \u043d\u0435 \u0432\u0441\u0451 \u0433\u043b\u0430\u0434\u043a\u043e:<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21165.<\/strong> \u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e.<br \/>  \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437-\u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 position, \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043e\u043a\u043d\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 JS (\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e):<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438:<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u0435\u0433 html \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0435\u0433\u043e let html = document.documentElement; \/\/\u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443: let scrollPosition = window.pageYOffset; \/\/\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e top \u0443 html \u0440\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 html.style.top = -scrollPosition + &quot;px&quot;; html.classList.add(&quot;hystmodal__opened&quot;);<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438:<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">html.classList.remove(&quot;hystmodal__opened&quot;); \/\/\u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u043e\u043a\u043d\u043e \u0442\u0443\u0434\u0430 \u0433\u0434\u0435 \u043e\u043d\u043e \u0431\u044b\u043b\u043e window.scrollTo(0, scrollPosition); html.style.top = &quot;&quot;;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a JavaScript \u043a\u043e\u0434\u0443. <\/p>\n<p>  <\/p>\n<h2 id=\"2-kod-javascript\">2. \u041a\u043e\u0434 JavaScript<\/h2>\n<p>  <\/p>\n<h3 id=\"22-karkas-biblioteki\">2.2 \u041a\u0430\u0440\u043a\u0430\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043e \u0441\u0442\u0430\u0440\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u044f IE11 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043a\u043e\u0434\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0435 ES5, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0444\u0438\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b.<\/li>\n<li>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ES6, \u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u043f\u0430\u0439\u043b\u0435\u0440 Babel, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0432\u0441\u0442\u0440\u043e\u0438\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b.<br \/>  \u0411\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0441 \u043f\u0440\u0438\u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435.<br \/>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u0430 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 <code>HystModal<\/code>. \u041d\u0438\u0436\u0435 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0441\u043a\u0435\u043b\u0435\u0442 \u043a\u043e\u0434\u0430 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438, \u0430 \u043f\u043e\u0442\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class HystModal{     \/**      * \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430, \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0432 \u043d\u0435\u0433\u043e      * js-\u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u041e\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d      * \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 props      *\/     constructor(props){         \/**          * \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c          * \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0438\u0445 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438          * \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u043c\u0435\u0442\u043e\u0434 Object.assign          *\/         let defaultConfig = {             linkAttributeName: 'data-hystmodal',             \/\/ ... \u0437\u0434\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430         }         this.config = Object.assign(defaultConfig, props);          \/\/ \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438         this.init();     }      \/**       * \u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e _shadow \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043b\u043e\u0436\u0435\u043d div \u0441 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439      * \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439. \u041e\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u0442.\u043a. \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438      * \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u0430, \u044d\u0442\u0430 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0430 \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e      * \u043e\u0434\u043d\u0430      *\/     static _shadow = false;      init(){         \/**          * \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438.\u0442.\u0434.          *\/         this.isOpened = false; \/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u043e \u043b\u0438 \u043e\u043a\u043d\u043e         this.openedWindow = false; \/\/\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 .hystmodal         this._modalBlock = false; \/\/\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 .hystmodal__window         this.starter = false, \/\/\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &quot;\u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u044c&quot; \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430         \/\/ (\u043e\u043d \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0430 \u043d\u0435\u0433\u043e)         this._nextWindows = false; \/\/\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 .hystmodal \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c         this._scrollPosition = 0; \/\/\u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 (\u0441\u043c. \u0432\u044b\u0448\u0435)          \/**          * ... \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435          *\/          \/\/ \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443 \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0451 \u0432 \u043a\u043e\u043d\u0435\u0446 body         if(!HystModal._shadow){             HystModal._shadow = document.createElement('div');             HystModal._shadow.classList.add('hystmodal__shadow');             document.body.appendChild(HystModal._shadow);         }          \/\/\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441\u043c. \u043d\u0438\u0436\u0435.         this.eventsFeeler();     }      eventsFeeler(){          \/**           * \u041d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u043a\u043e\u043d \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c          * \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 - this.config.linkAttributeName          *           * \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043e\u0434\u043d\u0438\u043c          * \u043b\u0438\u0448\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 html          *           *\/         document.addEventListener(&quot;click&quot;, function (e) {             \/**              * \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043f\u0430\u043b \u043b\u0438 \u043a\u043b\u0438\u043a \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442,              * \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u043a\u043d\u043e              *\/              const clickedlink = e.target.closest(&quot;[&quot; + this.config.linkAttributeName + &quot;]&quot;);              \/** \u0415\u0441\u043b\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043b\u0438\u043a \u0431\u044b\u043b \u043d\u0430               * \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430, \u043d\u0430\u0445\u043e\u0434\u0438\u043c               * \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430              *  _nextWindows \u0438 _starter \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c              *  \u043c\u0435\u0442\u043e\u0434 open (\u0441\u043c. \u043d\u0438\u0436\u0435)              *\/             if (clickedlink) {                  e.preventDefault();                 this.starter = clickedlink;                 let targetSelector = this.starter.getAttribute(this.config.linkAttributeName);                 this._nextWindows = document.querySelector(targetSelector);                 this.open();                 return;             }              \/** \u0415\u0441\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u044b\u0437\u0432\u0430\u043d\u043e \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435              *  \u0441 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c data-hystclose,              *  \u0437\u043d\u0430\u0447\u0438\u0442 \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430              *\/             if (e.target.closest('[data-hystclose]')) {                 this.close();                 return;             }         }.bind(this));         \/** \u041f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443, \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 this          * \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f.          * \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c this \u043d\u0430 \u043d\u0430\u0448           * \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e .bind().          *\/           \/\/\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448\u0443 escape \u0438 tab         window.addEventListener(&quot;keydown&quot;, function (e) {                \/\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u043a\u043d\u0430 \u043f\u043e escape             if (e.which == 27 &amp;&amp; this.isOpened) {                 e.preventDefault();                 this.close();                 return;             }              \/** \u0412\u044b\u0437\u043e\u0432\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u043a\u0443\u0441\u043e\u043c \u043f\u043e Tab              * \u0438 \u0432\u0441\u044e \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u043c \u043d\u0430 \u043d\u0435\u0433\u043e              * (\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0433\u043e \u043f\u043e\u0437\u0436\u0435)              *\/              if (e.which == 9 &amp;&amp; this.isOpened) {                 this.focusCatcher(e);                 return;             }         }.bind(this));      }      open(selector){         this.openedWindow = this._nextWindows;         this._modalBlock = this.openedWindow.querySelector('.hystmodal__window');          \/** \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c          * \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c\/\u0440\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c          * \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 this.isOpened          *\/         this._bodyScrollControl();         HystModal._shadow.classList.add(&quot;hystmodal__shadow--show&quot;);         this.openedWindow.classList.add(&quot;hystmodal--active&quot;);         this.openedWindow.setAttribute('aria-hidden', 'false');          this.focusContol(); \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0444\u043e\u043a\u0443\u0441\u0430 (\u0441\u043c. \u043d\u0438\u0436\u0435)         this.isOpened = true;     }      close(){         \/**          * \u041c\u0435\u0442\u043e\u0434 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430. \u041a\u043e\u0434 \u0443\u043f\u0440\u043e\u0449\u0451\u043d          * \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0434\u0430\u043b\u0435\u0435.          *\/         if (!this.isOpened) {             return;         }         this.openedWindow.classList.remove(&quot;hystmodal--active&quot;);         HystModal._shadow.classList.remove(&quot;hystmodal__shadow--show&quot;);         this.openedWindow.setAttribute('aria-hidden', 'true');          \/\/\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u043a\u0440\u044b\u043b\u043e\u0441\u044c \u043e\u043a\u043d\u043e         this.focusContol();          \/\/\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u043a\u0440\u043e\u043b\u043b         this._bodyScrollControl();         this.isOpened = false;     }      _bodyScrollControl(){          let html = document.documentElement;         if (this.isOpened === true) {             \/\/\u0440\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b             html.classList.remove(&quot;hystmodal__opened&quot;);             html.style.marginRight = &quot;&quot;;             window.scrollTo(0, this._scrollPosition);             html.style.top = &quot;&quot;;             return;         }          \/\/\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b         this._scrollPosition = window.pageYOffset;         html.style.top = -this._scrollPosition + &quot;px&quot;;         html.classList.add(&quot;hystmodal__opened&quot;);     }  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 <code>HystModal<\/code>. \u0427\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const myModal = new HystModal({     linkAttributeName: 'data-hystmodal',  });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435\/\u043a\u043d\u043e\u043f\u043a\u0435 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c data-hystmodal, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439: <code>&lt;a href=&quot;#&quot; data-hystmodal=&quot;#myModal&quot;&gt;\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u043a\u043d\u043e&lt;\/a&gt;<\/code> \u0431\u0443\u0434\u0435\u0442<br \/>  \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043a\u043d\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b:<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21166:<\/strong> \u0435\u0441\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440 (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b), \u0442\u043e \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0434\u0432\u0438\u0433 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u043e\u0441\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0442\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mv\/c7\/sh\/mvc7shj2-m-n2pf8gqvocg79zro.gif\"\/><\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u2013 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043f\u0440\u0430\u0432\u0430 \u043a \u0442\u0435\u0433\u0443 html, \u0440\u0430\u0432\u043d\u044b\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u043d\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438\u043b\u0438 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 Chrome \u043d\u0430 Android). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0448\u0438\u0440\u0438\u043d\u0443 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 \u0441\u043a\u0440\u0438\u043f\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <code>_bodyScrollControl()<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/\u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430 let marginSize = window.innerWidth - html.clientWidth; \/\/\u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 \u0440\u0430\u0432\u043d\u0430 \u0440\u0430\u0437\u043d\u0438\u0446\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u043a\u043d\u0430 \u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 (\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 html) if (marginSize) {     html.style.marginRight = marginSize + &quot;px&quot;; }  \/\/\u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430 html.style.marginRight = &quot;&quot;;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 <code>close()<\/code> \u0443\u043f\u0440\u043e\u0449\u0451\u043d? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0431\u0438\u0440\u0430\u044f \u043a\u043b\u0430\u0441\u0441\u044b CSS \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u043a\u043d\u0430.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21167.<\/strong> \u041f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>visibility:hidden<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0438 \u043d\u0435 \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u043a\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>visibility:hidden<\/code> \u043d\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0443\u0436\u043d\u0430, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 CSS-\u043a\u043b\u0430\u0441\u0441 <code>.hystmodal\u2014moved<\/code> \u043f\u043e\u0447\u0442\u0438 \u0442\u0430\u043a\u043e\u0439-\u0436\u0435 \u043a\u0430\u043a \u0438 <code>.hystmodal--active<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.hystmodal--moved{     visibility: visible; }<\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>\u0417\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043a \u043e\u043a\u043d\u0443 \u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00abtransitionend\u00bb \u043d\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435. \u0417\u0430\u0442\u0435\u043c \u0443\u0434\u0430\u043b\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>`.hystmodal\u2014active<\/code>, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u044f css-\u043f\u0435\u0440\u0435\u0445\u043e\u0434. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f, \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00abtransitionend\u00bb, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u0443\u0434\u0430\u043b\u0438\u043c \u0441\u0430\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0438\u0436\u0435: \u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">close(){     if (!this.isOpened) {         return;     }     this.openedWindow.classList.add(&quot;hystmodal--moved&quot;);     this.openedWindow.addEventListener(&quot;transitionend&quot;, this._closeAfterTransition);     this.openedWindow.classList.remove(&quot;hystmodal--active&quot;); }  _closeAfterTransition(){     this.openedWindow.classList.remove(&quot;hystmodal--moved&quot;);     this.openedWindow.removeEventListener(&quot;transitionend&quot;, this._closeAfterTransition);     HystModal._shadow.classList.remove(&quot;hystmodal__shadow--show&quot;);     this.openedWindow.setAttribute('aria-hidden', 'true');     this.focusContol();     this._bodyScrollControl();     this.isOpened = false; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 <code>_closeAfterTransition()<\/code> \u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0443\u0434\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f transitionend \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430, \u0432\u0435\u0434\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 removeEventListener \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c <code>this._closeAfterTransition()<\/code> \u043d\u0435 \u0432\u0435\u0448\u0430\u044f \u0435\u0433\u043e \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0432\u043d\u0443\u0442\u0440\u0438 addEventListener, <code>this<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u043d\u0430\u0448 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u0436\u0451\u0441\u0442\u043a\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 \u043a this.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/\u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 this._closeAfterTransition = this._closeAfterTransition.bind(this)<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"22-zakrytie-okna-po-kliku-na-overley\">2.2 \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u043a\u043d\u0430 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043e\u0432\u0435\u0440\u043b\u0435\u0439<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u2013 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u043a\u043d\u0430 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0438 <code>.hystmodal__wrap<\/code>. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u0430\u043a \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043d\u0430 <code>.hystmodal__wrap<\/code> \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">document.addEventListener(&quot;click&quot;, function (e) {     const wrap = e.target.classList.contains('hystmodal__wrap');     if(!wrap) return;     e.preventDefault();     this.close(); }.bind(this));<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043c\u0430\u043b\u043e\u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21168.<\/strong> \u0415\u0441\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043a\u043d\u0430, \u0430 \u043e\u0442\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 (\u043d\u0430\u0434 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u043e\u0439), \u043e\u043a\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432 \u043e\u043a\u043d\u0435 \u0444\u043e\u0440\u043c\u0430. \u0412\u044b \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0435 \u043c\u044b\u0448\u044c \u0447\u0443\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435, \u043a\u0443\u0440\u0441\u043e\u0440 \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443 \u0438 \u0432\u0434\u0440\u0443\u0433 \u043e\u043a\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0432\u0441\u0451 \u0432\u0434\u0440\u0443\u0433 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0438\u0437 \u0432\u0438\u0434\u0443. \u041d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u043a \u0431\u044b\u043b\u043e.<\/p>\n<p>  <\/p>\n<p>\u041e\u043a\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0435 \u043c\u044b\u0448\u0438 \u0431\u044b\u043b\u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 click \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u043e\u0431\u0449\u0435\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0430 \u0443 \u043d\u0430\u0441 \u044d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 <code>.hystmodal__wrap<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c html, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0435\u0449\u0451 \u043e\u0434\u0438\u043d div \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 <code>.hystmodal__window<\/code> \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044f \u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434 \u043e\u043a\u043d\u043e\u043c. \u041d\u043e \u043d\u0430\u043c \u0431\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 div \u0435\u0449\u0451 \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430\u0448 addEventListener \u043d\u0430 \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430: \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 mousedown \u0438 mouseup \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 <code>.hystmodal__wrap<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 <code>eventsFeeler()<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">document.addEventListener('mousedown', function (e) {     \/**     * \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0431\u044b\u043b\u043e \u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430\u0434 .hystmodal__wrap,     * \u0438 \u043e\u0442\u043c\u0435\u0447\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 this._overlayChecker     *\/     if (!e.target.classList.contains('hystmodal__wrap')) return;     this._overlayChecker = true; }.bind(this));  document.addEventListener('mouseup', function (e) {     \/**     * \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0431\u044b\u043b\u043e \u043b\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0435 \u043c\u044b\u0448\u0438 \u043d\u0430\u0434 .hystmodal__wrap,     * \u0438 \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0442\u043e\u0436\u0435 \u0431\u044b\u043b\u043e \u043d\u0430 \u043d\u0451\u043c, \u0442\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043e\u043a\u043d\u043e     * \u0438 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c this._overlayChecker \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435     *\/     if (this._overlayChecker &amp;&amp; e.target.classList.contains('hystmodal__wrap')) {         e.preventDefault();         !this._overlayChecker;         this.close();         return;     }     this._overlayChecker = false; }.bind(this));<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"23-upravlenie-fokusom\">2.3 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u043e\u043c<\/h3>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043e \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u043a\u0443\u0441\u043e\u043c: <code>focusContol()<\/code> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u043e\u043a\u043d\u0430 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 <code>focusCatcher(event)<\/code> \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443\u0445\u043e\u0434\u0430 \u0444\u043e\u043a\u0443\u0441\u0430 \u0438\u0437 \u043e\u043a\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430 \u0431\u044b\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <a href=\"https:\/\/github.com\/Ghosh\/micromodal\">\u00abMicromodal\u00bb (Indrashish Ghosh)<\/a>. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<p>  <\/p>\n<p>1.&nbsp;\u0412 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0432\u0441\u0435 css \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0444\u043e\u043a\u0443\u0441 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0432 init()):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/\u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 init \u0438\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 this._focusElements = [     'a[href]',     'area[href]',     'input:not([disabled]):not([type=&quot;hidden&quot;]):not([aria-hidden])',     'select:not([disabled]):not([aria-hidden])',     'textarea:not([disabled]):not([aria-hidden])',     'button:not([disabled]):not([aria-hidden])',     'iframe',     'object',     'embed',     '[contenteditable]',     '[tabindex]:not([tabindex^=&quot;-&quot;])' ];<\/code><\/pre>\n<p>  <\/p>\n<p>2.&nbsp;\u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>focusContol()<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432 \u043e\u043a\u043d\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430 \u043d\u0435\u0433\u043e \u0444\u043e\u043a\u0443\u0441, \u0435\u0441\u043b\u0438 \u043e\u043a\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043e\u043a\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u2013 \u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 <code>this.starter<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">focusContol(){     \/** \u041c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442 \u0444\u043e\u043a\u0443\u0441 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u043e      * \u0432 \u0441\u0430\u043c\u043e \u043e\u043a\u043d\u043e, \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043e\u043a\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f      * \u0441\u043c. \u0434\u0430\u043b\u0435\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435.      *\/     const nodes = this.openedWindow.querySelectorAll(this._focusElements);     if (this.isOpened &amp;&amp; this.starter) {         this.starter.focus();     } else {         if (nodes.length) nodes[0].focus();     } }<\/code><\/pre>\n<p>  <\/p>\n<p>3.&nbsp;\u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <code>focusCatcher()<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u043e\u043a\u043d\u0435 \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0444\u043e\u043a\u0443\u0441. \u0418 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0435\u0441\u043b\u0438 \u0444\u043e\u043a\u0443\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0432\u044b\u0439\u0442\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043e\u043a\u043d\u0430, \u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u043e\u043a\u0443\u0441 \u0441\u043d\u043e\u0432\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0432\u0435\u0434\u044c \u0444\u043e\u043a\u0443\u0441 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u043e Tab \u0442\u0430\u043a \u0438 \u043f\u043e Shift+Tab \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443).<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430 focusCatcher:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">focusCatcher(e){     \/** \u041c\u0435\u0442\u043e\u0434 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0444\u043e\u043a\u0443\u0441\u0443 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432\u043d\u0435 \u043e\u043a\u043d\u0430 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 TAB      * \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043e\u043a\u043d\u0435 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043a\u0440\u0443\u0433\u0443.      *\/      \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f     const nodes = this.openedWindow.querySelectorAll(this._focusElements);      \/\/\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432     const nodesArray = Array.prototype.slice.call(nodes);      \/\/\u0435\u0441\u043b\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0435\u0442 \u0432 \u043e\u043a\u043d\u0435, \u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442     if (!this.openedWindow.contains(document.activeElement)) {         nodesArray[0].focus();         e.preventDefault();     } else {         const focusedItemIndex = nodesArray.indexOf(document.activeElement)         if (e.shiftKey &amp;&amp; focusedItemIndex === 0) {             \/\/\u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442             focusableNodes[nodesArray.length - 1].focus();         }         if (!e.shiftKey &amp;&amp; focusedItemIndex === nodesArray.length - 1) {             \/\/\u043f\u0435\u0440\u0435\u0440\u043e\u0441 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442             nodesArray[0].focus();             e.preventDefault();         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u043b:<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u21169.<\/strong> \u0412 IE11 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043c\u0435\u0442\u043e\u0434\u044b <code>Element.closest()<\/code> \u0438 <code>Object.assign()<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 Element.closest, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/closest\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u0430\u043c\u0438 \u0434\u043b\u044f closest \u0438 matches \u043e\u0442 MDN<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0445 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f webpack, \u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0430\u043a\u0435\u0442\u043e\u043c <a href=\"https:\/\/www.npmjs.com\/package\/element-closest-polyfill\">element-closest-polyfill<\/a> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 <code>Object.assign<\/code>, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0436\u0435 babel-\u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c <a href=\"https:\/\/babeljs.io\/docs\/en\/babel-plugin-transform-object-assign\">@babel\/plugin-transform-object-assign<\/a><\/p>\n<p>  <\/p>\n<h2 id=\"3-zaklyuchenie-i-ssylki\">3. \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044f \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0442\u0430\u0442\u044c\u0438, \u0432\u0441\u0451 \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u0432\u044b\u0448\u0435, \u044f \u043e\u0444\u043e\u0440\u043c\u0438\u043b \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/AddMoreScripts\/hystModal\">hystModal<\/a> \u043f\u043e\u0434 MIT-\u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439. \u0412\u044b\u0448\u043b\u043e 3 \u043a\u0411 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441 gzip. \u0415\u0449\u0451 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0434\u043b\u044f \u043d\u0435\u0451 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043d\u0430 <a href=\"https:\/\/addmorescripts.github.io\/hystModal\/index_ru.html\">\u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a> \u0438 <a href=\"https:\/\/addmorescripts.github.io\/hystModal\/\">\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a> \u044f\u0437\u044b\u043a\u0435.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0432\u043e\u0448\u043b\u043e \u0435\u0449\u0451 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 hystModal, \u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u0432\u043a\u043b\/\u0432\u044b\u043a\u043b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u043e\u043c, \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f, \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f)<\/li>\n<li>\u041a\u043e\u043b\u043b\u0431\u0435\u043a\u0438 (\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u043e\u043a\u043d\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f (\u0432 \u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430))<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0437\u0430\u043f\u0440\u0435\u0442 \u043d\u0430 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u043d\u043e\u0432\u043e\u0433\u043e (\u0435\u0441\u043b\u0438 \u043e\u043a\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043e\u043a\u043d\u0430).<\/li>\n<li>\u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438-\u043a\u0440\u0435\u0441\u0442\u0438\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0432 CSS<\/li>\n<li>\u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f CSS \u0438 JS \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 Webpack.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0435 \u0432 <a href=\"https:\/\/github.com\/AddMoreScripts\/hystModal\">GitHub<\/a>, \u0438\u043b\u0438 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 Issues \u043e \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0445 \u0431\u0430\u0433\u0430\u0445. (\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0432 \u0433\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u043a\u0435 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u043f\u043e\u043a\u0430 \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435. \u0421\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0439 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/www.instagram.com\/anton_sitedev\/\">\u0432 Instagram<\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/519662\/\"> https:\/\/habr.com\/ru\/post\/519662\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/519662\/\">\n<p>\u042f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0430\u0439\u0442\u043e\u0432. \u041f\u043e\u0447\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b, \u0431\u044b\u043b\u0438 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u044b \u0437\u0430\u043a\u0430\u0437\u0430 \u0437\u0432\u043e\u043d\u043a\u0430 \u0432 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430\u0445, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432, \u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412\u0451\u0440\u0441\u0442\u043a\u0430 \u0442\u0430\u043a\u0438\u0445 \u043e\u043a\u043e\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0431\u0435\u0437 \u043f\u043e\u043c\u043e\u0449\u0438 JS \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0448\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS, \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043e\u043d\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438, \u0438 \u0438\u0437-\u0437\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043d\u0435\u0434\u043e\u0447\u0435\u0442\u043e\u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u044e\u0442 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0435\u0439 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7p\/_m\/ak\/7p_mak5it82clg_a1hqef00nhpg.jpeg\"\/><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-310112","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/310112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=310112"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/310112\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=310112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=310112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=310112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}