{"id":47188712,"url":"https://github.com/sufangyu/dialog2","last_synced_at":"2026-03-13T10:12:20.024Z","repository":{"id":41397961,"uuid":"70669791","full_name":"sufangyu/dialog2","owner":"sufangyu","description":"移动端弹窗插件第二版，包括常见的 alert、confirm。toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。（已停止维护，请使用vue、react 等新框架）","archived":false,"fork":false,"pushed_at":"2018-04-13T08:09:51.000Z","size":121,"stargazers_count":325,"open_issues_count":12,"forks_count":96,"subscribers_count":16,"default_branch":"master","last_synced_at":"2023-11-07T16:59:05.022Z","etag":null,"topics":["dialog","jquery-zepto","js","mobile"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sufangyu.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-12T06:27:33.000Z","updated_at":"2023-09-13T04:57:24.000Z","dependencies_parsed_at":"2022-08-25T11:41:18.961Z","dependency_job_id":null,"html_url":"https://github.com/sufangyu/dialog2","commit_stats":null,"previous_names":[],"tags_count":2,"template":null,"template_full_name":null,"purl":"pkg:github/sufangyu/dialog2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sufangyu%2Fdialog2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sufangyu%2Fdialog2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sufangyu%2Fdialog2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sufangyu%2Fdialog2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sufangyu","download_url":"https://codeload.github.com/sufangyu/dialog2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sufangyu%2Fdialog2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30465042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T06:34:02.089Z","status":"ssl_error","status_checked_at":"2026-03-13T06:33:49.182Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dialog","jquery-zepto","js","mobile"],"created_at":"2026-03-13T10:12:19.063Z","updated_at":"2026-03-13T10:12:20.011Z","avatar_url":"https://github.com/sufangyu.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"移动端弹窗插件第二版，包括常见的 alert、confirm。toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。\n\n### 特性\n+ 支持常见的 alert、confirm、toast、notice 四种类型弹窗\n+ 可选择使用 IOS 或者 Material Design 风格的弹窗\n+ 可自定义按钮的文字、样式、回调函数，支持多个按钮\n+ 多个弹窗状态改变回调函数\n+ 同时支持 jQuery 和 Zepto 库\n+ 可扩展性强\n\n### 新增\n+ 弹窗可选 IOS 或者 Material Design 风格\n+ 可自定义多个按钮\n+ 按钮排版样式，并排或者堆叠\n+ notice 弹窗的位置，居中或者底部\n\n### 截图\n\u003cimg src=\"http://7xp00j.com1.z0.glb.clouddn.com/modal.gif\" width=\"200\" /\u003e\n\u003cimg src=\"http://7xp00j.com1.z0.glb.clouddn.com/moreButtons.gif\" width=\"200\" /\u003e\n\u003cimg src=\"http://7xp00j.com1.z0.glb.clouddn.com/moduleChange.gif\" width=\"200\" /\u003e\n\n\n## 示例\n查看效果，扫二维码或者移步→：[demo示例](http://sufangyu.github.io/project/dialog2/dist/demos/)\n\u003cp\u003e\u003cimg src=\"http://7xp00j.com1.z0.glb.clouddn.com/dialog2EWM.png\" width=\"100\" alt=\"erweima\" /\u003e\u003c/p\u003e\n\n\n## 使用说明\n**1、引入 CSS 文件**\n```css\n\u003clink rel=\"stylesheet\" href=\"../css/dialog.css\" /\u003e\n```\n\n**2、引入 JS 文件**\n```javascript\n\u003cscript src=\"../lib/zepto.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../js/dialog.js\"\u003e\u003c/script\u003e\n```\n\n**3、HTML 结构**\n```html\n\u003cbutton id=\"btn-01\"\u003e显示弹窗\u003c/button\u003e\n```\n\n**4、实例化**\n```javascript\n$(document).on('click', '#btn-01', function() {\n    var dialog1 = $(document).dialog({\n        content: 'Dialog 移动端弹窗插件的自定义提示内容',\n    });\n});\n```\n\n\n\n## 参数\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e参数\u003c/th\u003e\n            \u003cth\u003e默认值\u003c/th\u003e\n            \u003cth\u003e说明\u003c/th\u003e\n        \u003c/tr\u003e                           \n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etype\u003c/td\u003e\n            \u003ctd\u003e'alert'\u003c/td\u003e\n            \u003ctd\u003e弹窗的类型。alert: 确定; confirm: 确定/取消; toast: 状态提示; notice: 提示信息\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003estyle\u003c/td\u003e\n            \u003ctd\u003e'default'\u003c/td\u003e\n            \u003ctd\u003ealert 与 confirm 弹窗的风格。\u003cbr /\u003edefault: 根据访问设备平台; ios: ios 风格; android: MD design 风格\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etitleShow\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n            \u003ctd\u003e是否显示标题\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003etitleText\u003c/td\u003e\n            \u003ctd\u003e'提示'\u003c/td\u003e\n            \u003ctd\u003e标题文字\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebodyNoScroll\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003ebody 内容不可以滚动\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecloseBtnShow\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003e是否显示关闭按钮\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003econtent\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003e弹窗提示内容, 值可以是 HTML 内容\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003econtentScroll\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n            \u003ctd\u003ealert 与 confirm 弹窗提示内容是否限制最大高度, 使其可以滚动\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003edialogClass\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003e弹窗自定义 class\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eautoClose\u003c/td\u003e\n            \u003ctd\u003e0\u003c/td\u003e\n            \u003ctd\u003e弹窗自动关闭的延迟时间(毫秒)。\u003cbr /\u003e0: 不自动关闭; 大于0: 自动关闭弹窗的延迟时间\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eoverlayShow\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n            \u003ctd\u003e是否显示遮罩层\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eoverlayClose\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003e是否可以点击遮罩层关闭弹窗\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebuttonStyle\u003c/td\u003e\n            \u003ctd\u003e'side'\u003c/td\u003e\n            \u003ctd\u003e按钮排版样式。side: 并排; stacked: 堆叠\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebuttonTextConfirm\u003c/td\u003e\n            \u003ctd\u003e'确定'\u003c/td\u003e\n            \u003ctd\u003e确定按钮文字\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebuttonTextCancel\u003c/td\u003e\n            \u003ctd\u003e'取消'\u003c/td\u003e\n            \u003ctd\u003e取消按钮文字\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebuttonClassConfirm\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003e确定按钮自定义 class\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebuttonClassCancel\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003e取消按钮自定义 class\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebuttons\u003c/td\u003e\n            \u003ctd\u003e[]\u003c/td\u003e\n            \u003ctd\u003econfirm 弹窗自定义按钮组, 会覆盖\"确定\"与\"取消\"按钮; \u003cbr /\u003e单个 button 对象可设置 name [ 名称 ]、class [ 自定义class ]、callback [ 点击执行的函数 ]\u003c/td\u003e\n        \u003c/tr\u003e\n\n        \u003ctr\u003e\n            \u003ctd\u003einfoIcon\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003etoast 与 notice 弹窗的提示图标, 值为图标的路径。不设置=不显示\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003einfoText\u003c/td\u003e\n            \u003ctd\u003e''\u003c/td\u003e\n            \u003ctd\u003etoast 与 notice 弹窗的提示文字, 会覆盖 content 的设置\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eposition\u003c/td\u003e\n            \u003ctd\u003e'center'\u003c/td\u003e\n            \u003ctd\u003enotice 弹窗的位置, center: 居中; bottom: 底部\u003c/td\u003e\n        \u003c/tr\u003e\n\n        \n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## 回调函数\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003e函数\u003c/th\u003e\n            \u003cth\u003e默认值\u003c/th\u003e\n            \u003cth\u003e说明\u003c/th\u003e\n        \u003c/tr\u003e                           \n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonClickConfirmBtn\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e点击“确定”按钮的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonClickCancelBtn\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e点击“取消”按钮的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonClickCloseBtn\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e点击“关闭”按钮的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonBeforeShow\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e弹窗显示前的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonShow\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e弹窗显示后的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonBeforeClosed\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e弹窗关闭前的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonClosed\u003c/td\u003e\n            \u003ctd\u003efunction(){}\u003c/td\u003e\n            \u003ctd\u003e弹窗关闭后的回调函数\u003c/td\u003e\n        \u003c/tr\u003e\n\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## 方法\n| 方法            | 说明  |\n| :--------       | :----  |\n|obj.close |关闭对话框。\u003cbr /\u003e用法：dialogObj.close() |\n| obj.update | 更改 toast 和 notice 类型弹窗内容 ( 图标以及提示文字 )\u003cbr /\u003e可传入参数：\u003cbr\u003econtent: 弹窗内容, 可以是HTML \u003cbr\u003e                infoIcon: 弹窗提示图标\u003cbr\u003einfoText: 弹窗提示文字\u003cbr\u003eautoClose: 自动关闭的延迟时间\u003cbr\u003eonBeforeClosed: 关闭前回调函数\u003cbr\u003eonClosed: 关闭后回调函数  |\n\n\n## 目录结构\n```\n.\n├─dist                # 项目发布资源目录, Grunt 生成\n│  ├─css              # 项目 CSS 文件\n│  ├─demos            # 项目示例页面\n│  ├─images           # 项目 image 文件\n│  ├─js               # 项目 JS 文件\n│  │  ├─dialog.js     # 弹窗 JS\n│  │  ├─dialog.min.js # 弹窗最小版本 JS\n│  │  └─example.js    # 示例 JS\n│  └─lib              # 公共 JS 文件\n│\n├─src                 # 实际进行开发的目录\n│  ├─css              # 项目 CSS 文件, 由 Grunt 生成\n│  ├─demos            # 项目示例页面\n│  ├─images           # 项目 image 文件\n│  ├─js               # 项目 JS 文件\n│  │  ├─dialog.js     # 弹窗主要 JS\n│  │  ├─example.js    # 示例 JS\n│  │  ├─ripple.js     # 点击水波纹效果 JS\n│  │  └─tapEvent.js   # 点击事件 JS\n│  ├─lib              # 公共 JS 文件\n│  ├─scss             # 项目相关 SCSS 文件\n│  └─templates        # 初始静态 DMEO 资源目录\n│\n├─Gruntfile.js        # Grunt任务配置\n├─_config.json        # Grunt配置所需信息\n└─package.json        # 项目信息以及依赖\n```\n\n## Grunt 使用方法\n**1、安装 Grunt**\n```\nnpm install\n```\n\n**2、在本地运行项目**\n```\ngrunt serve\n```\n\n**3、grunt 命令**\n```\ngrunt serve  // 浏览 Demo: 本地服务器\ngrunt dist   // 开发环境: 生产实际项目使用代码 \ngrunt src    // 开发环境: 本地服务器; 实时刷新\n```\n\n## 最新版本\n### 2.1.0 (2018-04-12)\n+ 增加 弹窗支持按钮点击后不关闭；\n+ 增加 弹窗显示后，body 内容不可以再滚动配置项；\n\n[全部更新日志](https://github.com/sufangyu/dialog2/blob/master/Changelog.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsufangyu%2Fdialog2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsufangyu%2Fdialog2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsufangyu%2Fdialog2/lists"}