KingComp – веб-программист
График работы: 9:00 - 18:00 Пн - Пт
Скрипт стилизации модального окна поможет вам выделить ваш сайт из десятки однотипных. При помощи этого продукта можно создать различные по стилю модальные окна прямо в редакторе. Никаких больше CSS, HTML и т.д. Вы сами решаете какими они должны быть. К примеру, стилизация позволяет собрать уникальные окна для каждого товара на одном сайте! Все просто, оригинально и красиво, не требует жертв!

Исходный код

Файлы с исходным кодом можно открыть в текстовом редакторе «Блокнот».

Исходный код из файла body.html копируем в BODY заключив его в теги script

Редактор

Добавьте на страницу элемент HTML-виджет

HTML-виджет для Платформы LP

Откройте один из файлов template1.txt или template2.txt и скопируйте исходный код.

Шаблон модального окна

Теперь нажмите Импорт на HTML-виджете

Импорт в HTML-виджет

Вставьте в открытое окно ваш скопированный код и сохраните

Импорт шаблона модального окна

У вас теперь появилась обычная Кнопка редактора, но с возможностями настроек модального окна.

Первым делом посмотрите раздел Настройки HTML-виджета, там вы увидите два параметра

Настройки модального окна для Платформы LP

«Белый фон» — если включена галочка, у модального окна появляется белый фон, если выключена фон прозрачный. Опция, как правило, требуется на старте с пустого окна, чтобы не путаться с прозрачным фоном окна.

«По центру страницы» — если включена, то модальное окно будет по центру страницы, если выключена, то по умолчанию. В редакторе эта опция никакого эффекта не проявляет, чтобы не мешать работать с редактором.

Основная фишка этого скрипта в том, что она позволяет оформлять модальное окно прямо в редакторе. Причем вы сразу видите как она будет выглядеть на опубликованной странице.

Вот пример самого простого модального окна в редакторе

Пример модального окна

Кнопку «Закрыть» вы также можете перемещать куда угодно и стилизовать как угодно прямо в редакторе.

Например, сделать его таким

Кнопка Закрыть модального окна

Пример

Пример стилизации модального окна

Обновления

Обновление от 6 февраля 2018

Скрипт переписан с нуля. Статья обновлена.

Теперь модальные окна на Платформе LP стилизовать стало намного проще. От вас больше не требуются знания в HTML и верстке. Просто воспользуйтесь всеми возможностями мощного редактора Платформы LP.