Позиционирование модального окна относительно текущего положения страницы?

Question

[Сергей Игнатьев]

При открытии модального окна, страница сайта поднимается на самый верх (понимаю, что это из-за top:0px; ). Что нужно изменить в коде, чтобы всплывающее окно оставалось также по центру, но не поднимало страницу н самый верх?

position: fixed;
	top: 50%;
	left: 5%;
	width: 90%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateY(-50%);
	-moz-transform:  translateY(-50%);
	-ms-transform:  translateY(-50%);
	transform:  translateY(-50%);

и код js

var ModalEffects = (function() {

	function init() {

		var overlay = document.querySelector( '.md-overlay' );

		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
				close = modal.querySelector( '.md-close' );

			function removeModal( hasPerspective ) {
				classie.remove( modal, 'md-show' );

				if( hasPerspective ) {
					classie.remove( document.documentElement, 'md-perspective' );
				}
			}

			function removeModalHandler() {
				removeModal( classie.has( el, 'md-setperspective' ) ); 
			}

			el.addEventListener( 'click', function( ev ) {
				classie.add( modal, 'md-show' );
				overlay.removeEventListener( 'click', removeModalHandler );
				overlay.addEventListener( 'click', removeModalHandler );

				if( classie.has( el, 'md-setperspective' ) ) {
					setTimeout( function() {
						classie.add( document.documentElement, 'md-perspective' );
					}, 25 );
				}
			});

			close.addEventListener( 'click', function( ev ) {
				ev.stopPropagation();
				removeModalHandler();
			});

		} );
		
	}

	init();

})();

Comments

[HelpSophie]

Извините, а Вы разобрались?
А то у меня тоже самое не получается.

[Сергей Игнатьев]

HelpSophie: да, я "разобрался") методом проб и ошибок) поочередно удалял функции и пробовал... точно не помню, но вроде бы удалил вот это
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
и окно перестало подниматься. Если у вас не сработает, то верните эту строчку и попробуйте удалить другую. Должно сработать.

Answer 1

[Юрий Чижов]

в коде сейчас используется position:fixed - который позиционирует блок относительно окна браузера а не страницы. в нем ничего менять не надо
Саму страницу отматывает наверх javascript. Тут 2 варианта.

Или в вызове функции

$('.open-popup').click(function(){ 
// забыли вконце написать 
return false;
})

или сам скрипт делает что-то вроде
$( "window" ).scrollTop( 0 )
и это надо убрать

Comments

[Сергей Игнатьев]

Юрий, может увидите в коде, ну получается у меня разобраться...((
var ModalEffects = (function() {

function init() {

var overlay = document.querySelector( '.md-overlay' );

[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );

function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );

if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}

function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}

el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );

if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});

close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});

} );

}

init();

})();

[Юрий Чижов]

Сергей Игнатьев: ну для полноты картины стоит еще html с ссылкой открытия выложить