模态内的 UIKit v3 粘性元素？

Question

我想在 uk-modal-full 模态中有一个 uk-sticky 元素，但它不具有粘性行为。当我向下滚动模式时，该元素滚出屏幕。

<div uk-modal="bg-close: false" class="uk-modal-full">
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <div uk-sticky>
            <!-- Sticky content here. -->
        </div>
        <div>
           <!-- Other content here. -->
        </div>
    </div>
</div>

我也尝试过使用 bottom: true 选项。

<div uk-modal="bg-close: false" class="uk-modal-full">
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <div uk-sticky="bottom: true">
            <!-- Sticky content here. -->
        </div>
        <div>
           <!-- Other content here. -->
        </div>
    </div>
</div>

是否可以使用 UIKit 在模态框内添加粘性元素？

更新：

我测试了直接在 uk-modal div 中有一个 uk-sticky 元素并且成功了。

<div uk-modal="bg-close: false" class="uk-modal-full">
    <div uk-sticky>
        <h1>Testing Sticky</h1>
    </div>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <div uk-sticky>
            <!-- Sticky content here. -->
        </div>
        <div>
           <!-- Other content here. -->
        </div>
    </div>
</div>

然而，这并不是我所需要的，因为我需要内容位于内部 div 和 class uk-modal-dialog uk-modal-full;否则，没有填充或边距，看起来不太好。

Answer 1

最后，我得到了一种不受欢迎的解决方案，但它有效。

<div uk-modal="bg-close: false" class="uk-modal-full">
    <!-- .app-modal-sticky-header is a class I had to use -->
    <!-- in order to apply the background color obtained -->
    <!-- from .uk-modal-dialog. -->
    <div class="uk-modal-body app-modal-sticky-header" uk-sticky>
        <button class="uk-modal-close-full" uk-close></button>
        <h2 class="uk-modal-title">Modal Title</h2>
        <!-- Sticky content here. -->
    </div>
    <div class="uk-modal-dialog uk-modal-body">
        <!-- Scrollable content here. -->
    </div>
</div>

Answer 2

使用 class uk-modal-header 模式页眉，class uk-modal-footer 模式页脚，然后添加 uk-overflow-auto="" 属性解决此问题。

这使得正文内容可以滚动并且 header/footer 具有粘性。

  <div id="example-modal" class="uk-flex-top" uk-modal="">
    <div class="uk-modal-dialog uk-margin-auto-vertical">
      <button
        class="uk-modal-close-default"
        type="button"
        uk-close=""
      ></button>
      <div class="uk-modal-header">
        <!-- sticky -->
        <h3 class="uk-modal-title">
          Title
        </h3>
      </div>
      <div class="uk-modal-body" uk-overflow-auto="">
        <!-- scrollable -->
      </div>
      <div class="uk-modal-footer uk-text-right">
        <!-- sticky -->
        <button
          class="uk-button uk-button-default uk-modal-close"
          type="button"
        >
          Cancel
        </button>
        <button class="uk-button uk-button-primary" type="button">
          Save
        </button>
      </div>
    </div>
  </div>

模态内的 UIKit v3 粘性元素？

UIKit v3 sticky element inside modal?

modal-dialog

sticky

getuikit