使用 UIKIT Modal 获取变量（而不是提示）答案

【问题标题】：Using UIKIT Modal to get Variables (instead of prompt)使用 UIKIT Modal 获取变量（而不是提示）
【发布时间】：2023-03-15 03:19:01
【问题描述】：

我正在使用FullCalendar 并在点击日期时触发提示。所以如果我点击 9 月 30 日，我会看到两个提示框。

我目前使用以下代码在我的 javascript 中接收两个变量：

        var title = prompt('Job Title:');
        var project = prompt('Project Title:');

我正在尝试使用 UIKIT modal component 创建一个带有字段的模式来获取变量（而不是两个单独的提示弹出窗口）。

我可以显示模态并禁用提示，但 fullcalender 功能继续运行。它找不到 var 标题并抛出错误：

未捕获的引用错误：未定义标题

提示会暂停代码的处理，直到提供变量为止。我的模态没有。

什么是使用模态替换提示的正确方法。什么代码最适合用来暂停 JavaScript 的运行，直到按下保存按钮并将变量添加到字段中？

以下是所用代码的更多详细信息：

我将上面的JS代码替换为：

$.UIkit.modal('#workcal-add-modal').show();

并具有以下模态：

<!-- This is the modal -->
<div id="workcal-add-modal" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>

        <form class="uk-form">

            <fieldset data-uk-margin>
                <input type="text" placeholder="project Name" id="wc_add_project_title">
                <select>
                    <option>Project 1</option>
                    <option>Project 2</option>
                </select>
                <button class="uk-button">Save</button>
            </fieldset>

        </form>

    </div>
</div>

谢谢

【问题讨论】：

标签： javascript jquery modal-dialog uikit fullcalendar

【解决方案1】：

您需要创建一个基于promise 的方法，在其中创建一个promise，并在用户单击save 时解决它，或者在用户取消或关闭对话框时拒绝它。

看到这个：https://www.promisejs.org/

【讨论】：

【解决方案2】：

我的猜测是您在一个函数中创建这些变量然后结束，因此存储的变量被释放。

在脚本的顶部，创建两个变量。

    var title;
    var project;

当您的代码需要填充这些变量时，请使用代码：

    title = prompt('Job Title:');
    project = prompt('Project Title:');

稍后，当您的代码需要使用它们时，它们将被初始化为您想要的值，只要您在那之前不使用它们。

如果没有更多代码，并且要查看它们是在哪里创建和使用的，那么在您尝试使用它们时很难说出为什么 title 未定义。可能是范围，或者在您填充它们时，日历不会像在初始化时传入闭包的情况那样创建。

【讨论】：

【解决方案3】：

毕竟我很简单地解决了这个问题。

我只是将剩余的 javascript 封装在一个仅在单击保存按钮时触发的函数中。

        $("#modal_save").on("click", function(){ ... all the code here ... });

【讨论】：