Как добавить на страницу блок, который можно закрыть (например, баннер)

Как добавить на страницу блок, который можно закрыть (например, баннер)

Рецепт самого бесящего явления в интернете

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

Как сделать бесящий и мешающий — вы и так догадаетесь. 

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

Как добавить на страницу блок, который можно закрыть (например, баннер)

Что нам понадобится

Для начала нужна страница, на которую мы добавим такую плашку. Вы можете взять любую страницу, а мы сделаем плашку на странице с русским Wordle.

Кроме страницы нам потребуется:

  • HTML-код, который нарисует нам нужный блок;
  • CSS-стили, чтобы блок выглядел красиво;
  • Скрипт на JS — он уберёт блок по нажатию на крестик.

Выглядит сложно, но на деле всё быстро: код простой и добавляется за минуту.

Добавляем HTML-код с блоком на страницу

Мы сделаем самый простой блок, чтобы показать, как это всё работает. Если есть желание, в этот блок можно засунуть что угодно: форму подписки, опрос, предложение задонатить или что угодно ещё. Сам блок появится на странице в том месте, где мы вставим HTML-код. Если нам рекламная плашка нужна в самом начале страницы, то добавляем этот код сразу после тега <body>:

<!-- наш новый блок с уведомлением на странице -->
<div class="alert" id="pop">
    <!-- добавляем крестик и говорим, что делать при нажатии -->
    <span class="closebtn" onclick="del()">×</span> 
    <!-- надпись на плашке -->
    Больше проектов — <a href="https://thecode.media/">на сайте «Кода»</a>
</div>
Как добавить на страницу блок, который можно закрыть (например, баннер)
Появилась нужная надпись, но всё выглядит плохо и крестик не работает

Делаем красиво

У нас появятся три новых стиля: оформление плашки, крестика и действия крестика при наведении курсора. Эти стили добавляем в файл проекта style.css — в любое место, неважно, в начало или в конец файла. Если у вас на странице нет стилей и вы всё делаете в одном HTML-документе, то добавьте это тогда в раздел <style>:

/* панель с нашим уведомлением */
.alert {
    /* отступы */
    padding: 13px 13px 16px 13px;
    /* фон */
    background-color: orange;
    /* каким цветом будет текст */
    color: white;
    /* шрифт */
    font-family: Arial, sans-serif;
    /* отступ снизу */
    margin-bottom: 15px;
}

/* внешний вид крестика */
.closebtn {
    /* отступ слева */
    margin-left: 15px;
    /* крестик будет белым и располагаться справа */
    color: white;
    font-weight: bold;
    float: right;
    /* размер крестика */
    font-size: 26px;
    line-height: 20px;
    /* меняем внешний вид курсора при наведении */
    cursor: pointer;
    transition: 0.3s;
}

/* меняем цвет крестика на чёрный при наведении */
.closebtn:hover {
    color: black;
}
Как добавить на страницу блок, который можно закрыть (например, баннер)
Плашка стала красивее, но крестик по-прежнему не работает. Исправим

Добавляем нажатие на крестик

Когда мы делали крестик, то описали его так:<span class="closebtn" onclick="del()">×</span> Это значит, что при клике на него вызывается функция del(), которой у нас ещё нет. 

Если бы это был обычный проект, то мы бы дописали эту функцию в файле script.js и подключили бы его на странице. Но в Wordle уже есть такой скрипт, и он подключён хитрым образом:<script src="script.js" type="module"></script> Это значит, что вызывать функцию из события onclick не получится — такое ограничение у модуля.

Чтобы обойти это ограничение, сделаем отдельный файл script-del.js и добавим туда единственную функцию:

// новая функция, которая удалит нашу плашку
function del() {
	// получаем доступ к блоку по его ID
	var popup = document.getElementById("pop");
	// удаляем весь блок из документа
    popup.remove();
}

Функция remove­() удаляет элемент напрямую из DOM — это значит, что элемент исчезает со страницы и браузер про него забывает. Соответственно, страница мгновенно перерисовывается и все остальные элементы подтягиваются повыше, раз освободилось место:

Как добавить на страницу блок, который можно закрыть (например, баннер)

Посмотреть на работу плашки на странице проекта.

Что дальше

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

Код и описание проекта:

LeAnne Chan

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Читаете «Код»? Зарабатывайте на коде
Сфера ИТ и разработки постоянно растёт и требует новых кадров. Компании готовы щедро платить даже начинающим разработчикам, а опытных вообще отрывают с руками. Обучиться на разработчика можно в «Яндекс Практикуме».
Начать карьеру
Читаете «Код»? Зарабатывайте на коде Читаете «Код»? Зарабатывайте на коде Читаете «Код»? Зарабатывайте на коде Читаете «Код»? Зарабатывайте на коде
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
easy