UIKit v3 模式内的粘性元素？答案

【问题标题】：UIKit v3 sticky element inside modal?UIKit v3 模式内的粘性元素？
【发布时间】：2020-10-01 18:18:50
【问题描述】：

我想在 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>

但是，这并不完全是我所需要的，因为我需要将内容放在类 uk-modal-dialog uk-modal-full 的内部 div 中；否则，没有填充或边距，看起来不太好。

【问题讨论】：

标签： modal-dialog sticky getuikit

【解决方案1】：

有一个带有uk-modal-header 类的模态标题、带有uk-modal-footer 类的模态页脚，然后添加uk-overflow-auto="" 属性可以解决这个问题。

这使得正文内容可滚动并且页眉/页脚具有粘性。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：