vt-dialog 主题自带的对话框插件

简介:

这是主题中的一个对话框插件,主要包含两个文件,dialog.jsdialog.css

https://gitee.com/vthemecn/miragev/blob/main/assets/css/src/common/dialog.css

https://gitee.com/vthemecn/miragev/blob/main/assets/js/src/dialog.js

 

使用方法:

在页面引入HTML如下:

<div class="vt-dialog video">
    <div class="dialog-widget">
        <a href="javascript:;" class="close-button close"><i class="fa-solid fa-xmark"></i></a>
            这里是对话框的内容
    </div>
</div>

或者复杂一点的对话框:

<div class="vt-dialog video">
    <div class="dialog-widget">
        <a href="javascript:;" class="close-button close"><i class="fa-solid fa-xmark"></i></a>

        <div class="dialog-header">
            <div class="title">标题</div>
        </div>
        <div class="dialog-body">
            这里是对话框的内容
        </div>
        <div class="dialog-action-group">
            <button type="button" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-default close">取消</button>
        </div>
    </div>
</div>

如何弹出窗口:

import dialogTools from './dialog.js';

function dialogInit() {
  let btn = document.querySelector('.products-buttons-wrapper a');
  if(!btn) return;
  let dialog = document.querySelector('.vt-dialog.video');
  dialogTools.registerDialog(dialog);
  btn.addEventListener('click', e=>{
    dialog.show(); // 普通对话框
    // dialog.showModal(); // 模态对话框
  });
}
dialogInit();

 

收藏
评论
打赏
如何使用 WordPress TinyMCE 经典编辑器自带的 codesample 插件
上一篇
WordPress 站点地图
下一篇

发表评论

像素鱼丸
53701 阅读
97 发布
3 收藏
动态
MirageV 主题 v2.19.0 发布
MarkerV 插件 v1.2.0 发布
BotV 插件 v2.4.0 发布,开始支持 DeepSeek
MirageV 主题 v2.6.4 发布
LandV 企业主题 v2.6.0 发布
FishV 主题 v1.14 发布
BotV 插件 v1.7.0 发布
MirageV 主题 v2.5 正式发布
生成中...
真诚赞赏,手留余香
登录
注册
重置密码