Dima83
Новичок
Делаю всплывающее окно для просмотра картинок, также с помощью этого окна будут появляться ссылки на соц.сети которые предназначены как элементы социального замка и разблокировки контента. Столкнулся со следующее проблемой. Если на веб-странице присутствует текст и появляется вертикальная полоса прокрутки, то при нажатии на кнопку вызова popup-окна, полоса сколлбар прокручивается вверх. Это проблема появляется только когда я вызываю социальные сети, с картинками такой проблемы нет.
Причину удалось установить, дело в том что я использую тег “a href”, а для соц. Сетей тег “div”. Стоит только заключить картинку ссылку в контейнер, как скроллбар, также перескакивает вверх.
Перепробовав несколько вариантов мне удалось выявить некоторые причины почему так происходит.
1. У меня в коде есть такие строки.
Если их убрать, то scrollbar прокручиваться вверх будет уже в обоих вариантах, т.е. на картинке и на ссылке.
2. Чтобы запретить прокручивать контент, я убираю scrollbar с помощью этого кода.
Если этот код удалить чтобы страница прокручивалась при всплывающем окне, то в этом случае проблема будет устранена и scrollbar перестанет подпрыгивать при открытии popup окна.
3. Еще одна проблема заключается в стилях. В css есть такой параметр height:100%;. Расположен он вот здесь.
Если код js не трогать вообще и просто убрать свойства "height:100%; ", то проблема решиться и scrollbar перестанет прокручиваться вверх в обоих случаях (что с соцсетями, что с ссылками). Однако меня не устраивает, что приходиться менять стили для внедрения новых возможностей для сайта. Помогите пожалуйста разобраться в чем может быть проблема?
Вот мой код:
Вот стили:
Причину удалось установить, дело в том что я использую тег “a href”, а для соц. Сетей тег “div”. Стоит только заключить картинку ссылку в контейнер, как скроллбар, также перескакивает вверх.
Перепробовав несколько вариантов мне удалось выявить некоторые причины почему так происходит.
1. У меня в коде есть такие строки.
JavaScript:
if ( placeholder ) {
placeholder.focus();
placeholder = null;
}
2. Чтобы запретить прокручивать контент, я убираю scrollbar с помощью этого кода.
JavaScript:
if ( localSettings.preventBGScroll ) {
if ( localSettings.preventBGScrollHtml ) {
document.documentElement.style.overflowY = 'hidden';
}
if ( localSettings.preventBGScrollBody ) {
document.body.style.overflowY = 'hidden';
}
document.body.style.paddingRight = '16px';
}
3. Еще одна проблема заключается в стилях. В css есть такой параметр height:100%;. Расположен он вот здесь.
CSS:
html, body {margin:0;height:100%;font:100% tahoma, arial, sans-serif;font-size:14px;}
Вот мой код:
HTML:
<script src="https://mysite5.su/js/jquery-1.9.1.js"></script>
<link rel="StyleSheet" type="text/css" href="style.css">
<div id="message"></div>
<div id="loader"></div>
<div>ЛОНГРИД</div>
<script language='JavaScript1.1' type='text/javascript'>
var isTouch, startX, startY, distX, distY, placeholder;
var state = 'closed';
var settings = {
selectorToggle: '[data-modal]',
selectorWindow: '[data-modal-window]',
selectorClose: '[data-modal-close]',
selectorVK: '[data-modal-vkontakte]',
selectorMail: '[data-modal-mail]',
selectorOK: '[data-modal-ok]',
modalActiveClass: 'active',
modalBGClass: 'modal-bg',
modalClass: 'modal',
modalShow: '#modal2',
preventBGScroll: true,
preventBGScrollHtml: true,
preventBGScrollBody: true,
backspaceClose: true,
stopVideo: true,
callbackOpen: function () {},
callbackClose: function () {}
};
openModal = function (toggle,modalID) {
var localSettings = settings;
var modal = document.querySelector(settings.modalShow);
if ( toggle )
{
placeholder = toggle;
}
showModal(modal,localSettings,toggle);
};
var createModalBg = function () {
if ( document.querySelector('[data-modal-bg]') ) return;
var modalBg = document.createElement('div');
modalBg.setAttribute('data-modal-bg', true);
modalBg.classList.add( 'modal-bg' );
document.body.appendChild(modalBg);
};
closeModal = function () {
var localSettings = settings;
var modal = document.querySelector( localSettings.selectorWindow + '.' + localSettings.modalActiveClass );
if ( !modal ) return;
modal.classList.remove( localSettings.modalActiveClass );
removeModalBg();
state = 'closed';
if ( localSettings.preventBGScroll ) {
document.documentElement.style.overflowY = '';
document.body.style.overflowY = '';
document.body.style.paddingRight = '';
}
localSettings.callbackClose( placeholder, modal );
if ( placeholder ) {
placeholder.focus();
placeholder = null;
}
}
var removeModalBg = function () {
var modalBg = document.querySelector( '[data-modal-bg]' );
if ( !modalBg ) return;
document.body.removeChild( modalBg );
};
var showModal = function(modal, localSettings,toggle)
{
modal = document.getElementById("modal2");
modal.classList.add( "active" );
createModalBg();
state = 'open';
var attr = $(toggle).attr('data-target');
if($(toggle).attr("data-target")=='#socialModal')
{
document.getElementById("showModal1").innerHTML = "Однокласники, Вконтакте, Mail.ru";
}
if(typeof attr === typeof undefined && attr !== false)
{
document.getElementById("showModal1").innerHTML = '<img src=\''+$(toggle)[0].href+'\'/>'
}
modal.setAttribute( 'tabindex', '-1' );
modal.focus();
if ( localSettings.preventBGScroll ) {
if ( localSettings.preventBGScrollHtml ) {
document.documentElement.style.overflowY = 'hidden';
}
if ( localSettings.preventBGScrollBody ) {
document.body.style.overflowY = 'hidden';
}
document.body.style.paddingRight = '16px';
}
}
var onClickOrTap = function (elem, callback, destroy) {
var onClickEvent = function (event) {
if ( isTouch ) {
isTouch = false;
return;
}
callback(event);
};
elem.addEventListener('click', onClickEvent, false);
};
var getClosest = function ( elem, selector ) {
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if ( elem.matches( selector ) ) return elem;
if ( $(elem).attr("class")==='photo' ) return elem;
}
return null;
};
var eventHandler = function (event) {
var key = event.keyCode;
var toggle = event.target;
var close = getClosest(toggle, settings.selectorClose);
var open = getClosest(toggle, settings.selectorToggle);
var modal = getClosest(toggle, settings.selectorWindo);
var attr = $(toggle).attr('data-target');
if ( toggle ) {
if(open)
{
event.preventDefault();
if(typeof attr === typeof undefined && attr !== false)
{
openModal(open, "#"+settings.modalClass);
}else
{
openModal( open, open.getAttribute('data-modal') );
}
}else
if(state === 'open')
{
closeModal();
}
}
};
onClickOrTap(document, eventHandler);
document.addEventListener('keydown', eventHandler, false);
</script>
<!-- Картинка при щелчке открывается в модальном окне -->
<a target="_blank" class="photo" href="files/img/big_img.jpg">
<img src="files/img/small_img.jpg"></a>
<!-- Картинка при щелчке открывается в модальном окне -->
<!--Социальный замок-->
<div id="social_locker_1" class="social_locker">
<div class="social_lock">
<div class="hide_block">
<div id="social_1">skachat_file1</div>
<div id="test_1">1</div>
</div>
<p>Этот контент закрыт </p>
<p>Пожалуйста, нажмите значок социальной сети ниже, чтобы разблокировать контент</p>
<img alt="Социальный замок" src="blockquote-info-ico.png" class="icon_fb" data-modal="#modal2"
data-target="#socialModal" data-up-total="1">
</div>
</div>
<!--Социальный замок-->
<!--Блок показа модального окна-->
<div id="content_show_1" class="content_show"></div>
<div class="modal" data-modal-window id="modal2">
<a class="close" data-modal-close>x</a>
<div id="showModal1" style="background-color:#424141"></div>
<br>
<button data-modal-close>Закрыть</button>
</div>
<!--Блок показа модального окна-->
CSS:
html, body {margin:0;height:100%;font:100% tahoma, arial, sans-serif;font-size:14px;}
/*Модальное окно*/
.modal {
background-color: #ffffff;
border: 0.0725em solid #e5e5e5;
border-radius: 0.0725em;
box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
display: none;
max-width: 100%;
padding: 0.5em 1em;
visibility: hidden;
z-index: 9999;
}
.modal.active {
display: block;
height: 100%;
left: 0;
max-height: 100%;
overflow: auto;
position: fixed;
right: 0;
top: 0;
visibility: visible;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 30em) {
.modal.active {
height: auto;
left: 3%;
margin-left: auto;
margin-right: auto;
right: 3%;
top: 50px;
}
}
/**
* Modal background
*/
.modal-bg {
background-color: #272727;
bottom: 0;
position: fixed;
left: 0;
opacity: .9;
right: 0;
top: 0;
z-index: 9998;
}
/**
* Close button
*/
.close {
color: #808080;
cursor: pointer;
float: right;
font-weight: bold;
font-size: 1.5em;
text-decoration: none;
}
.close:hover {
color: #5a5a5a;
cursor: pointer;
}