`

js -> 移动端 弹出类

 
阅读更多

 

作者  ：  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('弹窗关闭后执行~~');
        }
    });
});

弹窗风格

按设备 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: '不再提醒' }
        ]
    });
});

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 类型, 状态更改

加载中 TO 成功
$(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 类型, 弹窗类型更改

Toast TO Modal
$(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 类型，状态更改

提交中 TO 成功
$(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: 关闭后回调函数

 

 

分享到：
android -> ImageButton 内部图片 padding
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    好用的移动端弹出窗口

    "好用的移动端弹出窗口"这个项目就是针对这种需求提供的一种解决方案。它基于jQuery库，允许开发者自定义弹出窗口的样式，以适应各种不同的应用场景和设计风格。 jQuery是一个广泛使用的JavaScript库，它简化了HTML...

    JS移动端点击弹出遮罩层

    &lt;title&gt;JS移动端点击弹出遮罩层&lt;/title&gt; &lt;style&gt; .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } &lt;/style&gt; &lt;/head&gt; ...

    jQuery移动端弹出确认框插件.zip

    在这个"jQuery移动端弹出确认框插件"中，我们可以探讨几个关键的知识点，包括jQuery基础、移动端适配、自定义插件开发以及交互设计。 1. **jQuery基础**：jQuery简化了DOM操作，如选择元素、添加事件监听器和修改...

    jQuery移动端弹出层代码.zip

    总结来说，"jQuery移动端弹出层代码"是一个利用jQuery和JavaScript实现的移动设备时间选择组件，它通过按钮触发，提供了一种直观且易于操作的时间选择方式。这个代码库展现了如何结合HTML、CSS和JavaScript来构建...

    弹出订阅框响应式网页模板-适配移动端设备-HTML网页源码.zip

    您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计...

    jQuery手机移动端点击弹出时间选择代码

    在标题为“jQuery手机移动端点击弹出时间选择代码”的项目中，我们关注的是一个基于jQuery的解决方案，它允许用户在手机或平板电脑上方便地选择时间。这个功能对于日程安排、预订系统或者任何需要输入时间的应用都...

    jQuery+HTML5手机移动端遮罩弹出菜单代码

    这款"jQuery+HTML5手机移动端遮罩弹出菜单代码"正是为了实现这一目标而设计的。它利用了强大的JavaScript库jQuery和现代Web技术HTML5，创建了一个在手机屏幕上能够无缝展示的弹出菜单，为用户提供了便捷的导航体验。...

    V.rar_移动端弹出确认框插件

    "V.rar_移动端弹出确认框插件" 提供了一种优化的解决方案，旨在提高用户在进行关键操作时的交互体验。这个插件主要用于处理如“修改挂单失败”或“修改订单失败”这类需要向用户反馈错误信息的情景。在这些情况下，...

    jQuery手机移动端弹出确认对话框插件

    总的来说，创建一个jQuery手机移动端弹出确认对话框插件涉及HTML布局、CSS样式、jQuery事件处理和插件化编程。通过理解这些基础知识，开发者能够为移动应用提供更丰富的交互体验，同时保持代码的可维护性和可扩展性...

    pushbutton移动端弹出列表选择框

    "pushbutton移动端弹出列表选择框"就是一个专门为移动设备设计的交互组件，它能够在用户点击按钮后，通过从下往上推送的动画效果展示一个可选择的列表。这种设计既节省屏幕空间，又提供了良好的操作体验。接下来，...

    适用于移动端的弹出层

    本文将深入探讨“适用于移动端的弹出层”这一主题，主要围绕JavaScript开发中的模态框和弹出框设计与实现进行详细讲解。 一、模态框基础概念 模态框是一种阻止用户与页面其余部分交互，直到用户关闭或处理该框的...

    zepto手机移动端弹出提示框图标动画特效

    本资源“zepto手机移动端弹出提示框图标动画特效”正是一款专注于这一领域的优秀解决方案。Zepto是一个轻量级的JavaScript库，专为移动端浏览器设计，它提供了与jQuery相似的API，但在移动端具有更快的性能。 首先...

    jQuery手机移动端点击弹出数字键盘输入代码.zip

    jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...

    jQuery手机移动端弹出层美化下拉选项特效代码.zip

    这个“jQuery手机移动端弹出层美化下拉选项特效代码”正是为了解决这个问题而设计的。它结合了jQuery和JavaScript的技术，旨在使手机用户在选择下拉选项时能享受到更加顺畅和美观的交互效果。 首先，jQuery是一个轻...

    box.js 移动端弹出框源代码

    弹窗框box.js 2.0

    手机端图片弹出层查看(支持左右滑动图片切换)

    在移动应用开发中，"手机端图片弹出层查看(支持左右滑动图片切换)"是一个常见的功能需求，尤其在电商、社交或者媒体类应用中，用户可能需要查看大图，而这种查看方式通常以弹出层的形式呈现，方便用户在不离开当前...

    前端-移动端布局-案例

    在移动互联网飞速发展的今天，前端开发者...通过理解并熟练运用上述知识点，你可以创建出既美观又实用的移动端界面，为用户提供无缝的浏览体验。这个“移动端布局.rar”资源将是你学习和实践移动端布局的重要参考资料。

    uniapp微信隐私保护弹出框 隐私协议弹出框

    -- 引用隐私保护弹出框组件 --&gt; &lt;/view&gt; &lt;/template&gt; ``` 在实际开发中，`tanchuang-vue`组件可能包含了一些预定义的样式和交互逻辑，比如显示隐私协议的文字、确认和取消按钮等。开发者可以根据需求自定义组件内容...

Magicbox
Global site tag (gtag.js) - Google Analytics