Use javascript to fire modal ulkit css

Question

According to the Ulkit css documentation to display a modal window we have:

    <button uk-toggle="target: #my-id" type="button"></button>

<!-- This is the modal -->
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title"></h2>
        <button class="uk-modal-close" type="button"></button>
    </div>
</div>

It requires a button to fire the modal. As I would to display the modal without the need for a boot. In case it would be inside a javascript function and depending on the result of an IF, I want to call the modal. Example:

if(meuValor > 1){
    UIkit.modal("my-id").show();
}

While doing so the system returns to me = "Cannot read Property 'show' of Undefined"

What would be the way to call this modal?

Answer 1

You can do so for example. Every time the number input is greater than 1 the modal will open.

• Your code didn’t work because you didn’t pass the # in the modal call.
• Keyup method checks each input value and tests the condition in the if

$(".uk-input").on("keyup", function(){     
  if($(".uk-input").val() > 1)              
  UIkit.modal('#my-id').show();              
})

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

<!-- UIkit JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit-icons.min.js"></script>

<div class="uk-margin">
    <input class="uk-input" type="text">
</div>

<!-- This is the modal -->
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Teste</h2>
        <button class="uk-modal-close" type="button">X</button>
    </div>
</div>