Как сделать отображение модального окна посередине видимой области экрана?

Question

[Елена]

Всем привет!

Столкнулась с такой проблемкой при написании кода для появления модальных окон с position: absolute. Не получается сделать их по центру видимой области экрана (а точнее той, где находится ссылка непосредственно на само окно), если сам блок окном находится в самом конце body. Проблема именно с окнами с position: absolute, потому что в этом случае координаты отсчитываются от начала документа. С position: fixed проблем нет.

Пробовала как вариант:

$(('a[name=modal]')).click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    ..........................................
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

или

$('.mymodal').css({
	    left: ($(document).width() - $('.mymodal').outerWidth())/2,
        top: ($(window).height() - $('.mymodal').outerHeight())/2
	  });

Пока помог только способ вставки блока с окном непосредственно перед секцией, где есть на него ссылка, но это не выход, потому что все равно некорректно все отображается. А для position: fixed окна слишком длинные, чтобы скроллить их внутри окна вместо прокрутки со страницей.

Answer 1

[Stalker_RED]

Вы хотите, чтобы окно появлялось в текущем вьюпорте, но при этом его можно было проскроллить?

btnShowModal.onclick = e=>{
  modal.style.top = window.scrollY + 50 + 'px' // текущее положение скролла + отступ
  modal.classList.add('active') // показываем
}

демка: https://jsfiddle.net/6uLm9hs5/show/light/

Comments

[Елена]

Спасибо огромное! Вы меня спасли! А если на jquery? Надо, чтобы применялось ко всем окнам с классом modal и собственным id, вызываемым по a[name=modal] (то, что выше написала).

[Елена]

Все. Разобралась, как сделать для своего примера. Как-то так:

$(document).ready(function() {   
    $(('a[name=modal]')).click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    var x = $(this).offset();
    $(id).fadeIn(100);
    $(id).css('top', window.scrollY + 50 + 'px');
    }); 
})

jsfiddle.net

[Stalker_RED]

Елена,

The <a> name attribute is not supported in HTML5. Use the id attribute instead.

https://www.w3schools.com/tags/att_a_name.asp

И вы переменную x вычисляете, но нигде не используете.

[Елена]

Stalker_RED, х - это еще с экспериментов она осталась. Я пробовала через offset () вычислить координаты кнопки, по которой был клик, и присвоить их с нужным позиционированием моему окну модальному. Но это геморно вышло. Переменная х оттуда осталась, забыла стереть. Из этого экспериментального скрипта мне все равно нужна только строчка $(id).css('top', window.scrollY + 50 + 'px'), остальное все тоже останется.

The name attribute is not supported in HTML5. Use the...

Спасибо. Не знала об этом. Хотя валидатор на этот атрибут у меня никогда не ругался. Тогда через клик по классу или onclick лучше сделать?

[Stalker_RED]

Елена, лучше класс

[Елена]

Stalker_RED, спасибо. Обычно на него и вешаю. Сейчас просто подумала, что может на картинку придется повесить клик, но наверное не стану. Все равно под ней ссылка идет.
А как тогда лучше делать навигацию по секциям в ленде, если используются якори? У меня был сайт один на редактировании, там было так:

<section 1>
<a name="1></a>
................
</section>

Я так понимаю, раз name уже устарел, то вместо таких якорей лучше просто вешать нужный id на section (ну или любой другой родительский блок для секции)? Собственно, так я, правило, всегда так и поступаю - просто переход по id. Но сейчас задумалась, как сделать в этот раз лучше.

[Stalker_RED]

Елена,

Use the id attribute instead.

[HOPMNC EVER]

Stalker_RED, спасибо дружище, воспользовался твоим решением

[Stalker_RED]

Andrey Lc, ставь лайк :)