javascript - 通过 JavaScript 打开 UIKit modal
问题描述
我正在使用 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
}
}
我在模式按钮 id 上使用 .trigger('click') 与 Bootstrap 一起工作,但它不适用于 UIKIT
解决方案
所以基本上你需要用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>
推荐阅读
- python-3.x - 如何使用python使电子邮件中的特定文本以粗体显示
- youtube-api - 使用 YouTube 数据 API 插入直播时添加缩略图不起作用
- node.js - 如何在sequelize中用findOrCreate替换create
- android - 在 android 模拟器上启动应用程序时的 INSTALL_FAILED_INSUFFICIENT_STORAGE
- javascript - 组件在反应中落后一步更新状态
- vim - 调整窗口大小的快捷方式
- measurement - 我应该如何在分类变量和连续变量之间进行一致性分析?
- azure-active-directory - 由 azure ad 保护并由托管在 sharepoint online 上的 js 脚本调用的本地 Web api
- json - 从 Swift 中的 API 获取 JSON 数据
- kubernetes - 在 EKS 上使用 Istio Operator 和 Terraform 安装 Istio