javascript - Uikit3 - 以编程方式调用模态

Question

UIkit3 模态有问题。

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

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

这无济于事。它返回 Promise 'pending'

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

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

Answer 1

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

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

并关闭：

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

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

Answer 2

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

我认为在您的情况下，您的模态 ID 可能不正确。我相信UIKit.modal从控制台返回的示例图像中的未定义（但是如果 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>