html移动端弹窗，移动端弹窗默认
显⽰弹窗
$(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({
document有安卓版吗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',
});
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() {
onClosed: function() {
alert('弹窗关闭后执⾏~~');
}
});
});
弹窗风格
按设备
IOS
Android
$(document).on('click', '#btn-style-01', function() {
$(document).dialog({
type : 'confirm',
style: 'default', // default、ios、android
titleText: '弹窗风格',
content: '按访问设备显⽰的弹窗风格，这⾥是弹窗的提⽰信息内容',
});
});
⾃定义多个按钮
IOS
Android
$(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('你选择了“现在升级”');
}
}
]
});
});
按钮排版样式
IOS 并排
IOS 堆叠
Android 并排
Android堆叠
$(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: '不再提醒' }
]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。