Модальное изображение Bulma

Опубликовано: 15 Августа, 2022

Bulma — это современная структура CSS, которая предоставляет готовые к использованию внешние компоненты, которые мы можем использовать на наших веб-сайтах. Bulma Modal — это модальное наложение, которое может содержать все, что вы хотите. В этой статье мы увидим, как создать модальное изображение в Bulma.

Чтобы создать модальное изображение, мы будем использовать imgtag внутри модального содержимого и использовать JavaScript, чтобы открывать и закрывать модальное окно, переключая класс is-active в модальном компоненте.

Синтаксис:

<div class="modal">    
    <div class="modal-content">        
            <img src="...">        
    </div>    
</div>

Пример: В приведенном ниже примере показано, как создать модальное изображение с помощью Bulma.

Выход:

Ссылка: https://bulma.io/documentation/components/modal/#image-modal