Открытие модального UIKit через JavaScript - PullRequest
Новая
       11

Открытие модального UIKit через JavaScript

0 голосов
/ 19 февраля 2019

Я использую UIKit-фреймворк, и их модальный вид выглядит следующим образом: 

<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="#">Open</a>

Я хочу связать это с нажатием клавиши,поэтому, когда H нажимается, он переключает модальное значение: 

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

Я получил это, работая с Bootstrap, используя .trigger ('click') для идентификатора модальной кнопки, но он не работает для UIKIT

1 Ответ

0 голосов
/ 19 февраля 2019

Так что в основном вам нужно запустить модал с помощью Javascript.Это описано в документации 

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.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>
...