Как разместить модал в правом нижнем углу страницы с беглым комплектом?

Question

Я использую пакет fluent-kit и хочу разместить модальное окно в правом нижнем углу страницы. я добавить .modal-bottom а также .modal-right классы для div.modal-dialog элемент, согласно модальной # позиции документов, однако, он не работает.

Мой HTML

<div class='modal fade' id='modal-example' tabindex='-1' role='dialog' aria-labelledby='modal-example-title' aria-hidden='true'>
  <div class='modal-dialog modal-right modal-bottom' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='modal-example-title'>TITLE</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true' class='mi mi-Close'></span>
        </button>
      </div>
      <div class='modal-body'>
        CONTENT
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-primary'>OK</button>
      </div>
    </div>
  </div>
</div>

Я хочу использовать этот пакет специально, так как он предоставляет эту функциональность из коробки (я могу увидеть рабочие примеры в документации). Я уверен на 100%, что мои скрипты и стили добавлены правильно. Что мне не хватает?

Answer 1

Оказывается, что все функциональные возможности Fluent-Kit заключены в .fluent-modal Пространство имен.

Для того, чтобы все позиции классов:

• .modal-top
• .modal-bottom
• .modal-left
• .modal-right

и дополнительные классы размера:

• .modal-full-height
• .modal-fluid

для работы нужно добавить .fluent-modal класс для внешнего .modal элемент:

 <div class='modal fade fluent-modal' id='modal-example' tabindex='-1' role='dialog' aria-labelledby='modal-example-title' aria-hidden='true'>
  <div class='modal-dialog modal-right modal-bottom' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='modal-example-title'>TITLE</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true' class='mi mi-Close'></span>
        </button>
      </div>
      <div class='modal-body'>
        CONTENT
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-primary'>OK</button>
      </div>
    </div>
  </div>
</div>