MY SPELE
+380678383535
team@spele.ua

Всплывающие окна

Используется для обеспечения функциональности, а также для отображения справочной информации, диалоговых окон и других элементов пользовательского интерфейса. Для отображения всплывающего окна на веб-странице необходимо использовать следующую структуру кода:

<div class="shop-block-popup js-popup">
  <div class="dark"></div>
  <div class="popupblock">
    <a onclick="return popupClose('.js-popup');" class="close" href="javascript:void(0);">
      <svg viewBox="0 0 16 16">
        <use xlink:href="#icon-close"/>
      </svg>
    </a>
    <div class="window-content window-form">
      <form>
        <div class="block-title">
          Form title
        </div>
        <div class="element">
          <div class="el-caption">
            Form-field #1
          </div>
          <div class="el-value">
            Form-value #1
          </div>
        </div>
        <div class="element">
          <div class="el-caption">
            <input type="submit" class="ob-button" value="Button">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Внутри блока с классом .window-content размещаем контент, который необходим для отображения во всплывающем окне. Ссылка с классом .close используется для закрытия окна. Класс js-popup используется для закрытия и открытия всплывающего окна, передавая соответствующий класс в функцию popupClose('.js-popup'); и popupOpen('.js-popup');

Для отображения фиксированных кнопок (кнопок, прижатых к нижним границам страницы) внутри всплывающего окна необходимо использовать обертку .ob-button-fixed

в сочетании с дополнительным блоком .ob-button-fixed-place для резервации места на странице. 

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

 

<div class="shop-block-popup js-popup">
  <div class="dark"></div>
  <div class="popupblock">
    <a onclick="return popupClose('.js-popup');" class="close" href="javascript:void(0);">
      <svg viewBox="0 0 16 16">
        <use xlink:href="#icon-close"/>
      </svg>
    </a>
    <div class="window-content window-form">
      <form>
        <div class="block-title">
          Form title
        </div>
        <div class="element">
          <div class="el-caption">
            Form-field #1
          </div>
          <div class="el-value">
            Form-value #1
          </div>
        </div>
        <div class="ob-button-fixed">
          <a class="ob-button" href="#">Button</a>
          <a class="ob-button button-orange" href="#">Button</a>
          <a class="ob-button button-red" href="#">Button</a>
          <a class="ob-button button-cancel" href="#">Button</a>
        </div>
        <div class="ob-button-fixed-place"></div>
      </form>
    </div>
  </div>
</div>