Время настройки: 2 минуты

Копирование текста в Zero блоке

Добавляет кнопку копирования текста в Zero‑блоке с настраиваемым сообщением и подсказкой.

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

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

<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>

Задайте кнопке, при нажатии на которую будет копироваться текст, ссылку #copy

Если вы планируете использовать несколько кнопок копирования на странице, задайте им разные ссылки, например, #copy1, #copy2 и т. д.
Задайте текстовому элементу, который будет копироваться при нажатии на кнопку, класс .copy-text

Если отдельный текстовый элемент отсутствует, копироваться будет содержимое самой кнопки. Аналогично ссылкам, для нескольких кнопок задайте соответствующие им классы .copy1-text, .copy2-text и т.д.
Как задать класс элементам?
Если при копировании текста должно изменяться содержимое любого другого элемента, кроме кнопки, присвойте ему класс .copy-label

По-умолчанию модификация добавляет сообщение успеха в текст самой кнопки (Button). Если в качестве неё выступает группа объектов, то для вывода сообщения об успехе текстовому элементу внутри неё необходимо присвоить указанный класс. Если внутри кнопки нет текста, и класс .copy-label не указан ни для одного элемента внутри неё, сообщение об успехе выведется в скопированный текст. См. пример.

Для нескольких кнопок копирования по аналогии задайте разные названия классов, например, .copy1‑label, .copy2‑label и т. д.
Задайте в настройках модификации параметры копирования
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<!--copy.js Кнопка копирования текста в Zero-блоке. https://postnikovmd.com/mods/copy-->
<script>copy.init('#copy1')</script>
<script>copy.init('#copy2', { hint: true, style: { hint: { backgroundColor: '#18181B', color: '#FFFFFF', borderWidth: 1, borderColor: '#3B3842', borderRadius: 6,  } } })</script>
<script>copy.init('#copy3', { message: 'Текст успешно скопирован!' })</script>

Открыть пример

Настройки модификации

Ссылка кнопки копирования:

Скорость и тип переходов:

Сообщение при копировании

Текст, который будет отображаться внутри кнопки/текстового элемента при копировании. См. шаг #4 в инструкции.

+ Настройки подсказки

Выводить подсказку при копировании

Настройки подсказки

Цвет фона подсказки

Бордер подсказки

Радиус скругления

Положение подсказки

Текст подсказки

Цвет текста

Стиль текста

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

Текст, который будет отображаться во всплывающей подсказке.

<!--copy.js Кнопка копирования текста в Zero-блоке. https://postnikovmd.com/mods/copy-->
<script>copy.init("#copy")</script>

Скопировать код

Особенности

Работает с Zero-блоками

Кнопка позволяет копировать текст только из Zero‑блока
Поддерживает любую верстку

Элементы могут располагаться в любом месте в разных блоках
Имеет встроенные подсказки

Можно настроить появление подсказок при копировании