Uikit3 - モーダルをプログラムで呼び出す

Question

UIkit3モーダルに問題があります。

ドキュメントに言ったように私は、簡単なコマンドでそれを開くために得る：

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

これは何もしません。それは私が再びmodal.toggle()を呼び出すafterthat、それはウィンドウを表示しなければ約束

「が保留」を返します。

私は間違っていますか？どのように私は最初の呼び出しからモーダルを呼び出すのですか？

Answer 1

単純に要素IDをモーダルメソッドOR jQueryオブジェクトに渡すことができます。どちらの場合でも要素IDは正常に処理されます。

あなたのケースでは、あなたのモーダル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>

Answer 2

最後に、UIKitのでモーダルを開くための最も簡単な方法は、UIKitのjsのすべてでなくて、それを自分自身を行うことでした。

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

して閉じる：私もチェックしていないでしょうこれらの簡単な操作のためのUIKitにボンネットの下に何が起こっている

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

。