В некоторых случаях на веб-сайтах требуется панель предупреждений в верхней части страницы, если есть что-то срочное, о чем должны знать посетители веб-сайта. Если произошел сбой в работе службы компании, стихийное бедствие или очень важное сообщение, возможно, касающееся обслуживания веб-сайта, панель предупреждений — это то, что вам нужно. В этой статье Солодев предоставляет вам руководство по добавлению панели предупреждений на ваш сайт.
Ниже приведены необходимые HTML, CSS и JavaScript.
Шаг 1 — alert-bar.html
Скопируйте и вставьте приведенный ниже HTML-код на свою веб-страницу.
<div class="alert alert-info alert-dismissible" role="alert"> <button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">×</span></button> <p> To learn more about adding an alert bar to your website, click<a href="/" target="_blank"> here</a>. </p> </div> <section class="container ct-isotope-gallery__container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h2 class="ct-section-header"> WELCOME<span class="ct-section-header__separator" role="separator"><img alt="Separator" src="https://www.solodev.com/assets/design/separator.png"></span> </h2> <p class="text-center"> Programming not required. WebCorpCo enables marketers to manage their entire stack in one place without needing the ability to program as all code is automatically written by webcorpco. </p> </div> </div> <div class="ct-isotope-gallery"> <div class="row"> <div class="col-md-6"> <div class="ct-isotope-item ct-isotope-item--medium"> <div class="ct-isotope-item__inner "> <div class="ct-isotope-item__media"> <img alt="Big Data" src="https://www.solodev.com/assets/design/pic1.jpg"> <div class="ct-isotope-item__title"> <div class="outer"> <div class="inner"> <span>Big Data</span> </div> </div> <div class="ct-isotope-item__arrow"> <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png"> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="ct-isotope-item ct-isotope-item--small"> <div class="ct-isotope-item__inner yellow"> <div class="ct-isotope-item__media"> <img alt="Business Intelligence" src="https://www.solodev.com/assets/design/pic2.jpg"> </div> <div class="ct-isotope-item__title"> <div class="outer"> <div class="inner"> <span>Business Intelligence</span> </div> </div> </div> <div class="ct-isotope-item__arrow"> <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="ct-isotope-item ct-isotope-item--big" style="height: 400px;"> <div class="ct-isotope-item__inner darkblue"> <div class="ct-isotope-item__media"> <img alt="Data Mining" src="https://www.solodev.com/assets/design/pic3.jpg" style="height: 400px; padding-bottom: 10px;"> </div> </div> </div> <div class="ct-isotope-item__title" style="height: 50%;"> <div class="outer"> <div class="inner"> <span>Data Mining</span> </div> </div> </div> <div class="ct-isotope-item__arrow"> <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png" style="margin-right: 20px;"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="ct-isotope-item ct-isotope-item--medium"> <div class="ct-isotope-item__inner dark"> <div class="ct-isotope-item__media"> <img alt="Data Visualization" src="https://www.solodev.com/assets/design/pic6.jpg"> </div> <div class="ct-isotope-item__title"> <div class="outer"> <div class="inner"> <span>Data Visualization</span> </div> </div> </div> <div class="ct-isotope-item__arrow"> <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png"> </div> </div> </div> </div> <div class="col-md-6"> <div class="ct-isotope-item ct-isotope-item--small"> <div class="ct-isotope-item__inner blue"> <div class="ct-isotope-item__media"> <img alt="Global Availability" src="https://www.solodev.com/assets/design/pic2.jpg"> </div> <div class="ct-isotope-item__title"> <div class="outer"> <div class="inner"> <span>Global Availability</span> </div> </div> </div> <div class="ct-isotope-item__arrow"> <img alt="Arrow" src="https://www.solodev.com/assets/design/isotope-arrow.png"> </div> </div> </div> </div> </div>
Шаг 2 — alert-bar.css
Загрузите приведенный ниже CSS и включите его на свою веб-страницу.
Шаг 3 — Добавьте приведенные ниже элементы на свою веб-страницу.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="alert-bar.css"> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Исходно опубликовано в блоге Solodev Web Design
В этой статье Солодев показал вам, как добавить панель уведомлений на свой сайт. Вы можете настроить панель предупреждений в соответствии со своими потребностями и удалить ее, когда больше не нужно предупреждать посетителей веб-сайта.
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.