Накидал js-решение, чтобы открывать посты во всплывающем окне

Накидал js-решение, чтобы открывать посты во всплывающем окне Предложения по Пикабу, Пикабу, Javascript, Расширение

можно сделать матрёшку, открывая похожие посты

Если кто-то хочет себе, ставим расширение Custom JavaScript for Websites 2 или любое другое для запуска JS на странице. Включаем его для пикабу, подключаем jQuery 3.2.1 и вставляем код:

$('body').append('<style>.mypopup_bg{position: fixed;left:0px;top:0px;width:100%;height:100%;background-color: rgb(0 0 0 / 18%);z-index: 9999998;}.mypopup {position: fixed;left: 5vw;top: 5vh;width: calc(100% - 10vw);height: calc(100% - 5vw);z-index: 9999999;}.mypopup iframe {width: 100%;height: 100%;display: block !important;height:100% !important;}.closing {position: fixed;right: 0vw;top: 3vh;width: 50px;height: 50px;z-index: 999999;font-size: 40px;cursor: pointer;}</style>');

$('body').append($('<div class="mypopup_bg" style="display:none;"></div>'));

$('.mypopup_bg').append($('<div class="closing">&times;</div>'));

$(document).on('click', '.mypopup_bg', closePopup);

$(document).keydown(function(e) {

if (e.keyCode == 27) closePopup();

});

function closePopup() {

$('.mypopup').remove();

$('.mypopup_bg').hide();

}

$(document).on('click', '.story__comments-link,.story__title > a', function(event) {

event.preventDefault();

var link = $(this).attr('href');

if(link.indexOf('#comments') < 0) {

link = link + '#comments';

}

$('body').append($('<div class="mypopup"></div>'))

const iframe = document.createElement("iframe");

iframe.style.display = "none";

iframe.src = link;

$('.mypopup').append(iframe);

$('.mypopup_bg').show();

});

Открытие поста в попапе происходит при нажатии на заголовок или иконку комментариев. Закрытие по нажатию на фон\крестик или клавишу Esc.

Отзывы и предложения по Пикабу

13.1K поста2.7K подписчика

Добавить пост

Правила сообщества

Сообщество для аккумуляции всего фидбека по Пикабу


Если вы предлагаете новую функцию, опишите подробно:

- Задачу, которую выполняет предлагаемое изменение;

- Возможные плюсы и минусы;

- Версию Пикабу, для которой делаете предложение.


Пожалуйста, имейте в виду, что предложение:

- Должно быть полезным, понятным и простым;

- Должно быть востребованным пикабушниками;

- Не должно создавать визуального нагромождения.