jQuery.dialog.js自定义弹窗插件

 所属分类:弹窗

 浏览:723次-  下载:0次-  评论: 0次-  更新时间:2022-01-28

第一步:引入所需css、js文件

<link rel="stylesheet" type="text/css" href="css/dialog.css">

<script src="js/jquery-1.10.2.js"></script>

<script src="js/dialog.min.js" type="text/javascript"></script>

第二步:js代码

<script type="text/javascript">
            $("#openDialog1").dialog({
                id: "superDialog", //必填,必须和已有id不同
                title: "我的标题", //对话框的标题 默认值: 我的标题
                type: 0, //0 对话框有确认按钮和取消按钮 1 对话框只有关闭按钮
                easyClose: true, // 点击遮罩层也可以关闭窗口,默认值false
                form: [{
                    description: "用户名",
                    type: "text",
                    name: "username",
                    value: "tom"
                }, {
                    description: "密码",
                    type: "text",
                    name: "password",
                    value: "123456"
                }, {
                    description: "姓名",
                    type: "text",
                    name: "name",
                    value: "tom"
                }, {
                    description: "年龄",
                    type: "text",
                    name: "age",
                    value: "18"
                }], //form 是填充表单的数据,必填
                submit: function(data) {
                    //data是表单收集的数据
                    console.log(data);

                    //这个可自行删去
                    if (true) {
                        alert("提交成功\n(你自己可以去掉这个alert)");
                        //清空表单数据 传递参数=上述指定的id值
                        clearAllData("superDialog");
                    }

                }
            })


            $("#openDialog2").dialog({
                id: "dialog", //必填,必须和已有id不同
                title: "我的对话框", //对话框的标题 默认值: 我的标题
                type: 1, //0 对话框有确认按钮和取消按钮 1 对话框只有关闭按钮
                form: [{
                    description: "用户名",
                    type: "text",
                    name: "username",
                    value: "username"
                }, {
                    description: "密码",
                    type: "text",
                    name: "password",
                    value: "可以设定默认值"
                }, {
                    description: "姓名",
                    type: "text",
                    name: "name",
                    value: "也可以不设置"
                }, {
                    description: "年龄",
                    type: "text",
                    name: "age"
                }] //form 是填充表单的数据,必填
            })
        </script>

jQuery.dialog.js自定义弹窗插件

金币说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值金币充值会员更多说明»
描述:jQuery.dialog.js自定义弹窗插件

文件目录结构

  • ┝ www.zzsucai.com.txt
  • ┝ 站长素材网.url
  • css
      • ┝ dialog.css
  • js
      • ┝ jquery-1.10.2.js
      • ┝ dialog.min.js
  • ┝ index.html

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!
我的金币余额: 0 已下载次数: 0
所需金币:12开始下载

金币获取:签到、评论、投搞、充值、发帖、回帖    » 在线充值(10金币=1元)