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

Ниже приведены необходимые 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">&times;</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 и включите его на свою веб-страницу.

alert-bar.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>

Демо на JSFiddle

Скачать с GitHub

Исходно опубликовано в блоге Solodev Web Design

В этой статье Солодев показал вам, как добавить панель уведомлений на свой сайт. Вы можете настроить панель предупреждений в соответствии со своими потребностями и удалить ее, когда больше не нужно предупреждать посетителей веб-сайта.

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.