Как реализовать всплывающий блок?

Question

[Алексей Орлов]

Есть скрывающийся блок , который располагается в общем контейнере. В этом контейнере распологаются также, элементы с кнопками (4 элемента в ряд). Как сделать так, чтобы скрывающийся блок , появляся при нажатии на кнопку и позиционировался у кнопки под стрелкой.
Песочница

Comments

[Александр Симонов]

Сделать 4 блока и показывать тот который нужен?

Answer 1

[Владимир Обабков]

Надеюсь автор перепишет свой вопрос в контексте проекта

Напишу ответ сразу под проект(Так гораздо нагляднее)

$(function() {
   
    let btnsOpen = $('.button-open__models');
    
    let selectBlock = $('.card1');
    
    btnsOpen.on('click', function(e){
        e.preventDefault;
        $(this).parent().parent().append(selectBlock);
        selectBlock.fadeIn({
            duration: 400,
            easing: 'linear'
        });
    });
    
});

Comments

[Johny Smith]

Позиционировать при помощи JS наверное не надо, будет путаница потом через год.

[Johny Smith]

Владимир Обабков, допустим 1 класс добавлять любому элементу на лету, в котором visibility hidden вот и скрыто всё что угодно, в чём проблема?

[Владимир Обабков]

Olek1, То - ли вы задаёте вопрос непонятно.. то ли я чрезмерно уставший..
Напишите сюда и я вам отвечу как смогу..

[Johny Smith]

Владимир Обабков, ладно, проехали

[Алексей Орлов]

Владимир Обабков, Вот над чем ломаю голову, в блоке "Каталог" , только необходимо чтобы блок "Выбрать модель" при нажатии на кнопку появлялся по центру , но снизу от каждой кнопки. Тоесть есть если кнопки находят во 2 ряду, то блок не меняет позиции по горизонтале, просто переходит к кнопке ниже.

[Владимир Обабков]

Алексей Орлов, У вас динамическое кол-во карточек будет ? Или так и останется 2 ряда ?

[Алексей Орлов]

Владимир Обабков, при сужении экрана будет 3 ряда (максимум)

[Алексей Орлов]

Владимир Обабков, но скрывающиеся блок располагается не по центру.

[Алексей Орлов]

Владимир Обабков, этот блок должен создаваться под кнопками соответствующего ряда и не выходить за пределы контейнера, а располагаться в нём на всю ширину. Нужно создать какое-то условие, что блок создаётся в .container, но отступ сверху зависит от высоты блока , в котором была нажата кнопка.

Answer 2

[sdgroup14]

https://codepen.io/sdgroup14/pen/oMwGwb . Так сойдет?
выше верно написано, но я бы лучше попробовал максимально средствами css для лучшей прорисовки