javascript - 如何使用流利的工具包将模态放置在页面的右下角？

Question

我使用 fluent-kit包，我想将模态窗口放在页面的右下角。根据 modal#position docs，我将 .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 命名空间中。

为了所有的position类:

• .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>