Как сделать всплывающее модальное окно в Craftum

Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.

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

Инструкция в видео выше

<script src="https://code.jquery.com/jquery-3.7.0.js" ></script>

<style>
.popap .cli-block__content{
    position: relative;
    overflow: hidden;
}
.buttons{
        cursor: pointer !important;
}
</style>

<script>


$(".popap").html($(".popapblock").html());
$(".popapblock").remove();
$(".popap .cli-background").appendTo( ".popap .cli-block__content" );


 $('.buttons').click(function() {
                $('.popap').removeClass('show');
                $('html').css('overflow', 'auto');

            });
</script>

css стили:

popapblock
buttons

Если модификация была Вам полезна, можно поблагодарить любой суммой. Все средства пойдут на разработку других решений для Вас

Оставь свой комментарий первым!