betacode

Руководство Bootstrap Modal

View more Tutorials:

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

1- Bootstrap Modal

Modal это Dialog (Диалог) или Popup (всплывающее окно), оно отображается наверху всех других содержаний настоящей страницы. Цель у Modal это оповестить пользователю что-то про приложение или ожидание от пользователя ввести информацию.
Несмотря на то, что Javascript поддерживает некоторые разные dialog (диалоги), как Confirm, Alert, Open File, Save file,.. но точно эти dialog не могут быть кастомизированы, и поэтому вы ожидаете чего-то лучшего.
Сначала, посмотрите на пример:
modal-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Modal Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <!-- Button to Open the Modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
           Open modal
      </button>

      <!-- The Modal -->
      <div class="modal" id="myModal">
         <div class="modal-dialog">
            <div class="modal-content">
               <!-- Modal Header -->
               <div class="modal-header">
                  <h4 class="modal-title">Modal Heading</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
               </div>
               <!-- Modal body -->
               <div class="modal-body">
                  Modal body..
               </div>
               <!-- Modal footer -->
               <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
  
</html>
Ниже является структура у Modal. Элемент div.modal-content это место, в котором вы заинтересованы, включает 3 зоны Header, Body & Footer, и вы можете кастомизировать на всех этих 3-х зонах.
Modal Attributes

<div class="modal" id="myModal"
   data-backdrop="static"
   data-keyboard="false"
   tabindex="-1"
   aria-labelledby="myModalLabel"
   aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <!-- Modal body -->
         <div class="modal-body">
            Modal body..
         </div>
         <!-- Modal footer -->
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
Атрибут
(Attribute)
Описание
data-backdropДанный атрибут имеет 2 значения это true или static. По умолчанию это true, значит тот пользователь может нажать на фон (background), чтобы закрыть Modal.
data-keyboardДанный атрибут имеет 2 значения это  true или false. По умолчанию это false, если true пользователь может закрыть Modal нажав на ESC.
aria-labelledbyАтрибут у HTML5
aria-hiddenАтрибут у​​​​​​​  HTML5
Класс .fade позволяет вам создавать эффекты при скрытии или отображении Modal.
.fade

<div class="modal fade" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">
        
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
        
         <div class="modal-body">
            Modal body..
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
Например, создать Modal, который не содержит кнопку "X" (Найденный в правом углу у Modal).
Modal without X button

<div class="modal" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
         </div>
         <div class="modal-body">
            Modal body..
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

2- Modal & jQuery

Вы можете использовать JQuery для взаимодействия с Modal, например скрыть или отобразить Modal.

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Или более подробно:


$('#myModal').modal(options);

// Example:

var options = {
  'backdrop' : 'static',
  'keyboard' : true,
  'show' : true,
  'focus' : false
}
ОпцияОписание
backdropДанная опция имеет два значения это true или static. По умолчанию true, значит пользователь может нажать на фон (background), чтобы закрыть Modal.
keyboardДанная опция имеет два значения это true или false. По умолчанию false, если true пользователь может закрыть Modal нажав на ESC.
showДанная опция имеет два значения это true или false. Используется для скрытия или отображения Modal.
focusДанная опция имеет два значения это true или false, mặc định là false. Если true, Modal будет focus (сфокусирован) при создании.

3- События у Modal

Некоторые события запускаются (fired) когда Modal открывается или закрывается. И вы можете поймать данные события для выполнения чего-либо. Использовать метод "on" у jQuery чтобы связать событие с обработчиком.
СобытиеОписание
show.bs.modalДанное событие запускается (fired) сразу перед отображением Modal.
shown.bs.modalДанное событие запускается сразу после отображения Modal.
hide.bs.modalДанное событие запускается сразу перед скрытием Modal.
hidden.bs.modalДанное событие запускается сразу после скрытия Modal.
Вы можете обработать одно из вышесказанных событий как ниже:

$('#myModal').on('shown.bs.modal', function (e) {
  alert('Modal is successfully shown!');
});

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.