jQuery自定义弹窗插件dialog.js(原创)

所属分类： JQ特效 UI 弹出层

查看演示立即下载

插件描述：一个轻量级的、可高度自定义的、可自动收集数据的弹窗对话框。

更新时间：2020-08-30 23:01:42

更新说明：增加了一些新的配置项，大大丰富了功能：

- easyClose：点击遮罩层也可以关闭窗口,默认值false

- afterInit：用于初始化后运行函数

内置函数(新增内置函数）

- clearAllData(id) 去除对应id的对话框里的所有数据，可用于提交成功后

- moveBtn(id, height) 向下移动按钮的位置，参数id是对话框的id,参数height是向下移动的高度

更新时间：2020-08-30 00:31:01

简介

一个轻量级的、可高度自定义的、可自动收集数据的弹窗对话框插件。

快速上手

插件依赖(这些需要引入)

- jquery_3.4.1

- dialog.css

- dialog.js

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
</head>
<body>
    <button type="button" id="openDialog">点我打开对话框</button>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/dialog.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $("#openDialog").dialog({
            id: "superDialog", //必填,必须和已有id不同
            title: "我的标题", //对话框的标题 默认值: 我的标题
            type: 0, //0 对话框有确认按钮和取消按钮 1 对话框只有关闭按钮
            form: [{
                description: "用户名",
                type: "text",
                name: "username",
                value: "tom"
            }, {
                description: "密码",
                type: "text",
                name: "password",
                value: "123456"
            }], //form 是填充表单的数据,必填
            submit: function(data) {
                //data是表单收集的数据
                console.log(data);
            }
        })
    </script>
</body>
</html>