uikit 将信息传递给模态答案

【问题标题】：uikit Pass Information to Modaluikit 将信息传递给模态
【发布时间】：2022-11-30 03:26:41
【问题描述】：

我通过设置按钮显示使用 uikit (documentation) 的模式：

<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
  <span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Rename Category</h2>
        <form id="form-category-update">
            <input type="hidden" name="ExistingCategoryName" />
            <input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
        </form>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
        </p>
    </div>
</div>

而我需要做的是将data-category-name 中的值传递给我在模态表单中的隐藏输入。

我发现了一篇 Stack Overflow 文章 (here)，其中提问者声称通过引用按钮的点击事件中的按钮来回答他们自己的答案。但我对答案并不满意。

模态没有办法引用打开它的 DOM 吗？理想情况下，我想收听 beforeshow 事件，获取调用 DOM 的元素，然后获取我的数据属性。

【问题讨论】：

标签： javascript getuikit

【解决方案1】：

我之前遇到过这个，所以 .. 你关于定位 beforeshow 事件是正确的，但你真的无法从被调用的模态中获取调用按钮。相反，您可以将事件侦听器附加到 toggle element。这样，您就可以访问调用按钮（切换）和模式（目标）。

const element = document.querySelector('button[uk-toggle]');
document.addEventListener('beforeshow', function(el) {
    // get the hidden input
    const hiddenInput  = el.target.querySelector('input[name="ExistingCategoryName"]');
    // get original category name from the button
    const categoryName = el.explicitOriginalTarget.getAttribute('data-category-name');
    // set new value
    hiddenInput.value = categoryName;
    // log new value, just to see the result somewhere
    console.log(hiddenInput.value);
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.14/dist/js/uikit-icons.min.js"></script>

<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
  <span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Rename Category</h2>
        <form id="form-category-update">
            <input type="hidden" name="ExistingCategoryName" />
            <input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
        </form>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
        </p>
    </div>
</div>

【讨论】：