Документация Bites

Source files

Скачайте и установите в корень вашего сайта набор необходимых файлов

В head вашего web-докумета установите следующие компоненты

<!-- Bootstrap CSS v.4.0.0 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<!-- Animate CSS -->
<link rel="stylesheet" type="text/css" href="bites-master/css/animate.css" />

<!-- Bites Theme CSS -->
<link rel="stylesheet" href="bites-master/css/bites-theme.css" />

Перед закрывающимся /body вашего web-докумета установите следующие компоненты

<!-- jQuery Library JS v.3.2.1 minified -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper JS v.1.12.9 minified -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Bootstrap JS v.4.0.0 minified -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Bites JS -->
<script type="text/javascript" src="bites-master/js/bites.js"></script>

Inset bite (example)

Далее в код можно встраивать сам bite (example):

<!-- Button trigger modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#bite-1">Bite 1</button>

<!-- The Modal -->
<div class="modal fade m-width-570" id="bite-1">
    <div class="modal-dialog animated fast">
        <div class="modal-content text-center">
            <!-- Modal header -->
            <div class="modal-header">
                <button type="button" class="close close-light" data-dismiss="modal"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="popup-title text-white">Subscribe Our News</div>

                <p class="popup-text text-white">Subscribe and receive our newsletters to follow the<br> news about our fresh and fantastic products</p>

                <form class="form-subscribe form-inline justify-content-center">
                    <div class="form-group mr-3">
                        <input type="text" class="form-control email-address b-radius-30" placeholder="Enter your email" />
                    </div>
                    <button type="submit" class="btn text-white b-radius-30"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                </form>
            </div>
        </div>
    </div>
</div>

Способы запуска bites

  • Используя ссылку/кнопку.
<a href="#" class="btn btn-link" data-toggle="modal" data-target="#bite-1">Bite 1</button>

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#bite-1">Bite 1</button>
  • После нескольких кликов по области страницы
  • При попытке закрыть вкладку браузера
  • При прокрутке страници
  • Спустя некоторое время