JS 模态框实现保存成功提示

最新推荐文章于 2024-07-07 02:58:35 发布

稚枭天卓

最新推荐文章于 2024-07-07 02:58:35 发布

阅读量5.4k

点赞数

分类专栏： JS入门前台技术文章标签：模态框保存提示关闭当前页

本文链接：https://blog.csdn.net/u013630349/article/details/53783806

版权

本文展示了如何利用JavaScript实现一个模态框，在表单保存成功后弹出提示，并在设定的时间后自动关闭。通过`closest()`方法找到表单，使用`validate()`进行表单验证，`submitHandler`处理表单提交，`post`方法发送数据，`done.cs.form.submit`事件处理返回数据，最后用`setTimeout`延迟隐藏模态框。

摘要由CSDN通过智能技术生成

JS 文件函数编辑示例

$(function(){
    var autoFormSubmit = function(e){
        var _this = $(this);
        // closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上
        var _form = _this.closest("form");
        // 设置提交的
        _form.validate({
                //onclick  : false,
                // submitHandler 之后的函数是通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
                // 说明：当表单通过验证，提交表单。回调函数有个默认参数 form
                submitHandler:function(form,e){
                    // trigger() 方法触发被选元素的指定事件类型
                    // _this 是被选元素 - "before.cs.form.submit" 是事件 - 实际中只需要给这个事件添加不同的处理函数即可
                    // 其中校验是写在事件对应的匿名函数之中
                    _this.trigger("before.cs.form.submit");
                    allModalShow();
                    // 将 action 放于 attr 之上，不要放置在 submit 元素（a 或者 button） 之上
                    // 即 表单的 action 属性值为 url
                    $.post(_form.att