作者 : http://sufangyu.github.io/project/dialog2/dist/demos/
说明
特性
- 支持常见的 alert、confirm、toast、notice 四种类型弹窗
- 可选择使用 IOS 或者 Material Design 风格的弹窗
- 可自定义按钮的文字、样式、回调函数,支持多个按钮
- 多个弹窗状态改变回调函数
- 同时支持 jQuery 和 Zepto 库
- 可扩展性强
兼容性
- Chrome、Firefox 22+、Opera 9+、Safari、IE10+
- Android 4.0+ (Android 2.3 弹窗动画不够顺畅)
- iOS 8+
使用与示例
使用说明
1、引入 CSS 文件
<link rel="stylesheet" href="../css/dialog.css" />
2、引入 JS 文件
<script src="../lib/zepto.min.js"></script>
<script src="../js/dialog.js"></script>
3、HTML 结构
<button id="btn-01">显示弹窗</button>
4、实例化
$(document).on('click', '#btn-01', function() {
var dialog1 = $(document).dialog({
content: 'Dialog 移动端弹窗插件的自定义提示内容',
});
});
示例
默认
显示弹窗
$(document).on('click', '#btn-01', function() {
$(document).dialog({
content: '我是默认的弹窗。这里是提示信息内容',
});
});
自定义标题
显示弹窗
$(document).on('click', '#btn-02', function() {
$(document).dialog({
titleText: '我是自定义标题',
content: '自定义标题的弹窗。这里是弹窗的提示信息内容',
});
});
无标题
显示弹窗
$(document).on('click', '#btn-03', function() {
$(document).dialog({
titleShow: false,
content: '无标题的弹窗。这里是弹窗的提示信息内容',
});
});
自动关闭
显示弹窗
$(document).on('click', '#btn-04', function() {
$(document).dialog({
autoClose: 2500,
content: '自动关闭的弹窗。这里是弹窗的提示信息内容',
});
});
点遮罩层关闭
显示弹窗
$(document).on('click', '#btn-05', function() {
$(document).dialog({
overlayClose: true,
content: '可以点击遮罩层关闭的弹窗。这里是弹窗的提示信息内容',
});
});
Comfirm 类型
取消/确定
$(document).on('click', '#btn-06', function() {
$(document).dialog({
type: 'comfirm',
content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
});
});
Comfirm 类型, 自定义按钮文字
取消/确定
$(document).on('click', '#btn-07', function() {
$(document).dialog({
type : 'confirm',
titleText: '发现新版本'
content: '修复低版本安卓手机点透以及无法居中显示问题;去除CSS3启用GPU硬件加速',
buttonTextConfirm: '现在升级',
buttonTextCancel: '下次再说',
});
});
Comfirm 类型, 自定义按钮class
取消/确定
$(document).on('click', '#btn-08', function() {
$(document).dialog({
type : 'confirm',
content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
buttonClassConfirm: 'custom-confirm',
buttonClassCancel: 'custom-cancel',
});
});
Comfirm 类型, 按钮回调函数
取消/确定
$(document).on('click', '#btn-09', function() {
$(document).dialog({
type : 'confirm',
closeBtnShow: true,
content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
onClickConfirmBtn: function(){
alert('你点了“确定”按钮');
},
onClickCancelBtn : function(){
alert('你点了“取消”按钮');
},
onClickCloseBtn : function(){
alert('你点了“关闭”按钮');
}
});
});
Comfirm 类型, 状态回调函数
取消/确定
$(document).on('click', '#btn-10', function() {
$(document).dialog({
type : 'confirm',
content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
onBeforeShow: function() {
alert('弹窗显示前执行~~');
},
onShow: function() {
alert('弹窗显示后执行~~');
},
onBeforeClosed: function() {
alert('弹窗关闭前执行~~');
},
onClosed: function() {
alert('弹窗关闭后执行~~');
}
});
});
弹窗风格
$(document).on('click', '#btn-style-01', function() {
$(document).dialog({
type : 'confirm',
style: 'default', // default、ios、android
titleText: '弹窗风格',
content: '按访问设备显示的弹窗风格,这里是弹窗的提示信息内容',
});
});
自定义多个按钮
$(document).on('click', '#btn-buttons-02', function() {
$(document).dialog({
type : 'confirm',
style: 'android',
titleText: '发现新版本',
content: '修复低版本安卓手机点透以及无法居中显示问题;去除CSS3启用GPU硬件加速',
buttons: [
{
name: '不再提醒',
callback: function() {
alert('你选择了“不再提醒”');
}
},
{
name: '下次再说',
callback: function() {
alert('你选择了“下次再说”');
}
},
{
name: '现在升级',
class: 'dialog-btn-hl',
callback: function() {
alert('你选择了“现在升级”');
}
}
]
});
});
按钮排版样式
$(document).on('click', '#btn-buttonStyle-01', function() {
$(document).dialog({
type : 'confirm',
style: 'ios',
titleText: '发现新版本',
content: '修复低版本安卓手机点透以及无法居中显示问题;去除CSS3启用GPU硬件加速',
buttonStyle: 'stacked', // side: 并排; stacked: 堆叠
buttons: [
{ name: '现在升级' },
{ name: '下次再说' },
{ name: '不再提醒' }
]
});
});
Toast 类型
$(document).on('click', '#btn-11', function() {
$(document).dialog({
type : 'toast',
infoIcon: '../images/icon/loading.gif',
infoText: '正在加载中',
autoClose: 2500
});
});
Toast 类型, content创建内容
$(document).on('click', '#btn-15', function() {
$(document).dialog({
type : 'toast',
content: '<img class="info-icon" src="../images/icon/loading.gif" /><span class="info-text">正在加载中</span>',
autoClose: 2500
});
});
Toast 类型, 状态更改
$(document).on('click', '#btn-16', function() {
var toast5 = $(document).dialog({
type : 'toast',
infoIcon: '../images/icon/loading.gif',
infoText: '正在加载中',
});
setTimeout(function () {
toast5.update({
infoIcon: '../images/icon/success.png',
infoText: '加载成功',
autoClose: 2500,
});
}, 3000);
});
Toast 类型, 弹窗类型更改
$(document).on('click', '#btn-17', function() {
var toast6 = $(document).dialog({
type : 'toast',
infoIcon: '../images/icon/loading.gif',
infoText: '正在加载中',
});
setTimeout(function () {
toast6.close();
$(document).dialog({
content: '加载失败!请重新再试',
});
}, 2500);
});
Notice 类型
$(document).on('click', '#btn-17', function() {
$(document).dialog({
type : 'notice',
infoIcon: '../images/icon/loading.gif',
infoText: '正在加载中',
autoClose: 2500
});
});
$(document).on('click', '#btn-21', function() {
$(document).dialog({
type : 'notice',
infoText: '正在提交中',
autoClose: 2500,
position: 'bottom' // center: 居中; bottom: 底部
});
});
Notice 类型,content创建内容
$(document).on('click', '#btn-22', function() {
$(document).dialog({
type : 'notice',
content: '<img class="info-icon" src="../images/icon/loading.gif" alt="" /><span class="info-text">正在提交中</span>',
autoClose: 2500
});
});
Notice 类型,状态更改
$(document).on('click', '#btn-23', function() {
var notice5 = $(document).dialog({
type : 'notice',
infoIcon: '../images/icon/loading.gif',
infoText: '正在加载中'
});
setTimeout(function () {
notice5.update({
infoIcon: '../images/icon/success.png',
infoText: '加载成功!!',
autoClose: 2500
});
}, 3000);
});
API
参数
type | 'alert' | 弹窗的类型。alert: 确定; confirm: 确定/取消; toast: 状态提示; notice: 提示信息 |
style | 'default' | alert 与 confirm 弹窗的风格。 default: 根据访问设备平台; ios: ios 风格; android: MD design 风格 |
titleShow | true | 是否显示标题 |
titleText | '提示' | 标题文字 |
closeBtnShow | false | 是否显示关闭按钮 |
content | '' | 弹窗提示内容, 值可以是 HTML 内容 |
contentScroll | true | alert 与 confirm 弹窗提示内容是否限制最大高度, 使其可以滚动 |
dialogClass | '' | 弹窗自定义 class |
autoClose | 0 | 弹窗自动关闭的延迟时间(毫秒)。 0: 不自动关闭; 大于0: 自动关闭弹窗的延迟时间 |
overlayShow | true | 是否显示遮罩层 |
overlayClose | false | 是否可以点击遮罩层关闭弹窗 |
buttonStyle | 'side' | 按钮排版样式。side: 并排; stacked: 堆叠 |
buttonTextConfirm | '确定' | 确定按钮文字 |
buttonTextCancel | '取消' | 取消按钮文字 |
buttonClassConfirm | '' | 确定按钮自定义 class |
buttonClassCancel | '' | 取消按钮自定义 class |
buttons | [] | confirm 弹窗自定义按钮组, 会覆盖"确定"与"取消"按钮; 单个 button 对象可设置 name [ 名称 ]、class [ 自定义class ]、callback [ 点击执行的函数 ] |
infoIcon | '' | toast 与 notice 弹窗的提示图标, 值为图标的路径。不设置=不显示 |
infoText | '' | toast 与 notice 弹窗的提示文字, 会覆盖 content 的设置 |
position | 'center' | notice 弹窗的位置, center: 居中; bottom: 底部 |
回调函数
onClickConfirmBtn | function(){} | 点击“确定”按钮的回调函数 |
onClickCancelBtn | function(){} | 点击“取消”按钮的回调函数 |
onClickCloseBtn | function(){} | 点击“关闭”按钮的回调函数 |
onBeforeShow | function(){} | 弹窗显示前的回调函数 |
onShow | function(){} | 弹窗显示后的回调函数 |
onBeforeClosed | function(){} | 弹窗关闭前的回调函数 |
onClosed | function(){} | 弹窗关闭后的回调函数 |
方法
obj.close | 关闭对话框。 用法:dialogObj.close() |
obj.update | 更改 toast 和 notice 类型弹窗内容 ( 图标以及提示文字 ) 可传入参数: content: 弹窗内容, 可以是HTML infoIcon: 弹窗提示图标 infoText: 弹窗提示文字 autoClose: 自动关闭的延迟时间 onBeforeClosed: 关闭前回调函数 onClosed: 关闭后回调函数 |
相关推荐
基于jquery的移动端弹出窗口,可以修改弹出框样式。
jQuery手机移动端弹出确认对话框插件 jQuery手机移动端弹出确认对话框插件 jQuery手机移动端弹出确认对话框插件
jQuery移动端弹出确认框插件
jQuery手机移动端弹出层美化下拉选项特效代码下载。 演示地址在我置顶文章里
Javascript实现移动端点击按钮弹出遮罩层,自适应移动端屏幕大小。
jQuery移动端弹出层代码是一款简单实用的手机移动端点击弹出选择时间特效代码。
您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换,轻松打造出符合您项目风格的网站。同时,我们的代码结构清晰、注释详细,方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计...
pushbutton 移动端弹出列表选择框 移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入
一款很好看的zepto手机移动端弹出提示框图标动画特效,相当简单实用的手机端操作提示效果。
弹窗框box.js 2.0
适用于移动端的弹出层
js 移动端 日期选择底部弹出插件
移动端页面弹出对话窗口效果Demo,此文件中包含了展示效果所需的html,css和jQuery库文件。下载后可以直接查看效果。
dialog.js是一款移动端优先且同时支持jQuery和Zepto的模态对话框插件。它支持三种类型的弹出对话框,支持自定义按钮,文字等,并支持事件监听。
jquery+css实现的,点击图片或链接弹出遮罩层,并且图片放大展示的一套demo
一款简单实用的手机移动端点击弹出时间选择代码,jQuery微信手机弹出层选择时间特效。 引入js文件 [removed][removed] [removed][removed]
点击查看图片预览,支持多图片预约,可左右切换查看,兼容PC、移动端
jQuery HTML5手机移动端遮罩弹出菜单代码