Use javascript to trigger modal ulkit css

Question

Use javascript to trigger modal ulkit css

Navigation

#1 by (1 votes)

0

According to the Ulkit css documentation for displaying 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>

A button is required to trigger the mode. How would I do to display the modal without the need for a button. 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 me = "Can not read property 'show' of undefined"

What would be the way to call this modal?

javascript css

asked by anonymous 18.08.2018 / 20:28

1 answer

Multiple bootstrap modal calls Update of holidays in SQL Server table

score 1 · Accepted Answer

You can do this for example. Whenever the number in input is greater than 1 the modal will open.

Your code did not work because you did not pass # on the modal call.

Method keyup checks each value entry in the input and tests the condition on 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><scriptsrc="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><divclass="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>