Uikit3 - 以编程方式调用模态

Question

UIkit3模式出了问题。

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

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

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

如果我再次拨打modal.toggle()，那么它会显示窗口。

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

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

Answer 2

最后，在UIkit中打开模态的最简单方法是自己完成，没有UIkit js。

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

并关闭：

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

在UIkit中我们甚至无法检查这些简单的操作。