原生 dialog 说明

网站最近上了一批用户，为优化用户体验，决定用 AJAX + modal 窗口优化交互。找到 JQuery modal 插件发现已放弃维护，建议使用 dialog ，才知 html 有了原生 dialog ，学习吧。

项目

早知 121 ，轻松创建个人导航站。网站地址： https://www.zz121.com

dialog 使用场景

移动 url 分组时，弹出窗口，选择分组， “确定” 保存内容，关闭弹出窗口。
点击 “取消” 关闭弹出窗口。

使用 dialog 效果展示

代码实现

dialog 标签内包含 html 代码 dialog 可以像其他 html 标签一样，设置 ID 属性

注意 form method="dialog" , "确定" 和 "取消" 触发关闭弹出窗。

<dialog id="moveDialog">
    <form method="dialog" style="margin: 10px;">
        <div>
            <label>
                移动-选择分组<br/>
                <select name="class_id" id="class_id" style="margin: 10px;">
                    <option value="0">请选择分组</option>
                    {{range .ClassApiSrv.OptionsByUId .UserId}}
                    <option value="{{.Id}}"> {{.Title}}</option>
                    {{end}}
                </select>
            </label>
        </div>
        <div style="display: flex; flex-direction: row-reverse;">
            <button onclick="moveSave()" class="btn btn-info">确定</button> &nbsp;
            <button class="btn btn-gray" >取消</button>
        </div>

    </form>
</dialog>


// 只展示关键代码

// dialog 显示
const favDialog = document.getElementById("moveDialog");
favDialog.showModal()

// 获取 dialog 内表单数据， 和其他 element 一样的获取方式
let class_id = $("#class_id").val()

最简单的用法，就满足我的需求，此外还可以设置背景色，背景图，显示位置等，详见官方文档。

dialog 官方文档地址

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

其他

我不是专业前端人员，感觉基于 dialog, template, web component 的前端框架应该会是一个好用的框架。如果有哪个前端框架包含这些元素，评论区告诉我，感谢。

网站中使用原生 dialog 优化用户体验

原生 dialog 说明

项目

dialog 使用场景

使用 dialog 效果展示

代码实现

dialog 官方文档地址

其他