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命名空间中。

为了所有位置类：

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

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

1 个答案: