Uikit3 - 以编程方式调用模态答案

【问题标题】：Uikit3 - call out modal programmaticallyUikit3 - 以编程方式调用模态
【发布时间】：2017-12-30 02:53:43
【问题描述】：

UIkit3 modal 出了点问题。

我可以用简单的命令打开它，如文档中所述：

var modal = UIkit.modal($('#select-instrument'));
modal.toggle();

这没有任何作用。它返回 Promise 'pending'

如果之后我再次调用modal.toggle()，那么它确实会显示窗口。

我做错了什么？如何从第一次调用中调用模态？

【问题讨论】：

标签： javascript jquery getuikit

【解决方案1】：

您可以简单地将元素 ID 提供给模态方法或 jQuery 对象，它在这两种情况下都可以正常工作。

我认为在您的情况下，您的模态 ID 可能不正确。我相信UIKit.modal 在控制台的示例图像中返回 undefined （但是如果 ID 错误，您的模式根本不应该工作，嗯）。第一次调用时模态是否存在？

var modal = UIkit.modal('#modal-id');
$('#toggleButton').on('click', function() {
  modal.toggle();
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />

<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>

<!-- This is a button toggling the modal -->
<div class="uk-position-center">
  <button id="toggleButton" class="uk-button uk-button-default">Click for Modal</button>
</div>

<!-- This is the modal -->
<div id="modal-id" uk-modal>
  <div class="uk-modal-dialog uk-modal-body">
    <h2 class="uk-modal-title">Opened modal</h2>
  </div>
</div>

【讨论】：

ID 正确。因为当我第二次调用它时，模态打开了。最后最简单的方法是直接调用 modal $('#select-instrument').addClass('uk-open').show(); 就像一个魅力，UIkit js 程序员又搞砸了。
我不认为这是 UIKit 的问题，您是否尝试在调用 UIKit.modal 后记录模态对象？我从来没有遇到过这样的问题，我总是使用 JS 打开模态，因为我需要在它出现之前运行一些其他例程

【解决方案2】：

最后，在 UIkit 中打开 modal 最简单的方法是自己做，完全不用 UIkit js。

$('#select-instrument').addClass('uk-open').show();

然后关闭：

$('#select-instrument').removeClass('uk-open').hide();

对于这些我什至不会检查的简单操作，UIkit 的幕后发生了什么。

【讨论】：