I am using the UIKit framework and their modal looks like this:

<div id="modal-id" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Modal Title</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="uk-modal-footer uk-text-right">

            <button class="uk-button uk-button-primary" type="button">Ok</button>
        </div>
    </div>
</div>

It's opened normally with a button:

<a id='open-modal' uk-toggle="target: #modal-id" href="#">Open</a>

I want to link this to a keypress, so when H is pressed it toggles the modal:

document.body.onkeyup = function(e){
    if(e.keyCode === 72){
        console.log('H key pressed');
         // Toggle Modal
    }
}

I got this working with Bootstrap using .trigger('click') on the modal button id, but its not working for UIKIT

I am using the UIKit framework and their modal looks like this:

<div id="modal-id" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Modal Title</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="uk-modal-footer uk-text-right">

            <button class="uk-button uk-button-primary" type="button">Ok</button>
        </div>
    </div>
</div>

It's opened normally with a button:

<a id='open-modal' uk-toggle="target: #modal-id" href="#">Open</a>

I want to link this to a keypress, so when H is pressed it toggles the modal:

document.body.onkeyup = function(e){
    if(e.keyCode === 72){
        console.log('H key pressed');
         // Toggle Modal
    }
}

I got this working with Bootstrap using .trigger('click') on the modal button id, but its not working for UIKIT

• javascript
• modal-dialog
• getuikit

2 Answers 2

So basically you need to trigger the modal with Javascript. This is described in the documentation

document.body.onkeyup = function(e){
    if(e.keyCode === 72){
        console.log('H key pressed');
        // Toggle Modal
        UIkit.modal('#modal-id').toggle(); //you can use toggle or open here
    }
}

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

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare./ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>

<div id="modal-id" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Modal Title</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="uk-modal-footer uk-text-right">

            <button class="uk-button uk-button-primary" type="button">Ok</button>
        </div>
    </div>
</div>

<a id='open-modal' uk-toggle="target: #modal-id" href="#" class="uk-button uk-button-primary">Open</a>

function addPage() { UIkit.modal($('#page-modal')).show();}

<!-- UIkit CSS -->
    <link rel="stylesheet" 
        href="https://cdnjs.cloudflare./ajax/libs/uikit/3.0.3/css/uikit.min.css" />
<script src="https://code.jquery./jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- UIkit JS -->
    <script src="https://cdnjs.cloudflare./ajax/libs/uikit/3.0.3/js/uikit.min.js"> 
   </script>
    <script src="https://cdnjs.cloudflare./ajax/libs/uikit/3.0.3/js/uikit- 
    icons.min.js"></script>

    <div id="page-modal" uk-modal>
        <div class="uk-modal-dialog">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="uk-modal-header">
                <h2 class="uk-modal-title">Modal Title</h2>
            </div>
            <div class="uk-modal-body">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div class="uk-modal-footer uk-text-right">

                <button class="uk-button uk-button-primary" type="button">Ok</button>
            </div>
        </div>
    </div>

    <a href="javascript:void(0)" id="create-new-page" onclick="addPage()" class="uk-button uk-button-primary">Open</a>