Начал добавление модальных окон BS

.yaspellerrc

@@ -48,6 +48,7 @@
     "tfoot",
     "thead",
     "noUiSlider",
+    "dropdown",
     "cleancss"
   ]
 }

projectConfig.json

@@ -50,7 +50,8 @@
     "off-canvas": [],
     "burger": [],
     "progress": [],
-    "media": []
+    "media": [],
+    "modal": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1492,6 +1492,8 @@
 
       <h2 class="blocks-library__item-title">Выпадающий блок</h2>
 
+      <p>Основан на dropdown.js из Bootstrap. Изменения минимальны.</p>
+
       <p class="alert  alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
 
       <div class="dropdown">
@@ -1789,6 +1791,27 @@
 
     </section>
 
+    <section class="blocks-library__item" id="modal-demo" data-name=".modal">
+
+      <h2 class="blocks-library__item-title">Модальные окна</h2>
+
+      <p>Основан на modal.js из Bootstrap. Изменения минимальны (имена классов, пространство имен событий).</p>
+
+      <p class="alert  alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
+
+      <button class="btn" type="button" data-toggle="modal" data-target="#modal-demo-01">Показать модальное окно 1</button>
+      <a href="#modal-demo-02" data-toggle="modal">Показать модальное окно 2</a>
+      <span data-toggle="modal" data-target="#modal-demo-03">Показать модальное окно 3</span>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">111</pre>
+        </div>
+      </div>
+
+    </section>
+
     <div class="burger  blocks-library__menu-toggler" data-toggle="off-canvas"><span data-toggle="off-canvas"></span></div>
 
   </main>
@@ -1861,5 +1884,57 @@
 
     });
   </script>
+
+  <div id="modal-demo-01" class="modal" tabindex="-1" role="dialog">
+    <div class="modal__dialog" role="document">
+      <div class="modal__content">
+        <div class="modal__header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal__title">Modal 01 title</h4>
+        </div>
+        <div class="modal__body">
+          <p>Далеко-далеко за словесными горами...</p>
+        </div>
+        <div class="modal__footer">
+          <button type="button" class="btn" data-dismiss="modal">Закрыть</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="modal-demo-02" class="modal" tabindex="-1" role="dialog">
+    <div class="modal__dialog" role="document">
+      <div class="modal__content">
+        <div class="modal__header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal__title">Modal 02 title</h4>
+        </div>
+        <div class="modal__body">
+          <p>Далеко-далеко за словесными горами...</p>
+        </div>
+        <div class="modal__footer">
+          <button type="button" class="btn" data-dismiss="modal">Закрыть</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="modal-demo-03" class="modal" tabindex="-1" role="dialog">
+    <div class="modal__dialog" role="document">
+      <div class="modal__content">
+        <div class="modal__header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal__title">Modal 03 title</h4>
+        </div>
+        <div class="modal__body">
+          <p>Далеко-далеко за словесными горами...</p>
+        </div>
+        <div class="modal__footer">
+          <button type="button" class="btn" data-dismiss="modal">Закрыть</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </body>
 </html>

src/blocks/modal/modal.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/modal/modal.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<div class="modal">content</div>

src/blocks/modal/modal.scss

+// В этом файле должны быть стили только для БЭМ-блока modal, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+$opacity:                     0.7 !default;
+$transition-time:             0.3s !default;
+
+$z-index-modal:               100 !default;
+
+.js-modal-open {
+  overflow: hidden;
+}
+
+.modal {
+
+  $block-name:                &;
+
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-modal;
+  -webkit-overflow-scrolling: touch;
+
+  .js-modal-open & {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &__dialog {
+    position: relative;
+    margin: 0;
+    width: auto;
+  }
+
+  &__content {
+    position: relative;
+    background-color: #fff;
+    outline: 0;
+  }
+
+  // &__header {}
+
+  // &__body {}
+
+  // &__footer {}
+
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: ($z-index-modal - 1);
+    background-color: rgba(0, 0, 0, $opacity);
+    animation: modal-backdrop-show $transition-time 1;
+  }
+
+  &--open {
+
+    #{$block-name}__dialog {}
+  }
+}
+
+
+
+@keyframes modal-backdrop-show {
+
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/scss/variables.scss

@@ -89,3 +89,5 @@ $shadow:                      0 4px 2px -2px rgba(0, 0, 0, 0.3);
 $menu-desktop-width:          $screen-xl;
 $toggler-part-height:         3px;
 $toggler-part-bg-color:       #000;
+
+$z-index-modal:               100;