移动端弹出框组件－ Dialog

来源：互联网发布：如何网络销售水果编辑：程序博客网时间：2024/06/06 19:56

移动端弹出框组件－ Dialog

通过利用 Zepto＋CSS3 实现

一、使用方式

    $.dialog({                // 弹出框的类型                type: 'loading',                // 文字信息                content: null,                // 延迟多长时间关闭, 默认 3s 后关闭                delay: null,                // 延迟关闭时，回调函数                delayCallback: null,                // 遮罩层透明度                maskOpacity: null,                // 点击遮罩层可以关闭窗口                maskClose: true,                // 动画                animation: true,                // 按钮 组                buttons: [                    {                        type: 'danger',                        text: '确认',                        callback: function () {                            // 返回值为true， 则关闭窗口                            return true;                        }                    }, {                        type: 'default',                        text: '取消',                        callback: function () {                            alert('取消');                        }                    }                ],                buttons: null            });

二、设计思路

基本的 html 静态结构，样式搭建
- index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <!--删除苹果默认的工具栏和菜单栏-->    <meta name="apple-mobile-web-app-capable" content="yes">    <!--设置苹果工具栏颜色-->    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <!--忽略页面中的数字识别为电话-->    <meta name="format-detection" content="telephone=no,email=no">    <meta charset="UTF-8">    <link rel="stylesheet" href="dialog.css">    <title>移动端 Dialog</title>    <style>        * {            margin: 0;            padding: 0;        }        body {            padding: 20px;            font-size: 12px;        }        .btn {            display: block;            width: 100%;            border-radius: 3px;            padding: 1em;            margin: 20px 0;            color: #fff;            background-color: #077B01;            border: 1px solid #eee;            -webkit-appearance: none;        }    </style></head><body>    <!--<div class="g-dialog-container">        <div class="g-dialog-window">            <div class="g-dialog-header loading"></div>            <div class="g-dialog-content">正在拼命加载中</div>            <div class="g-dialog-footer">                <button type="button" class="btn red">删除</button>                <button type="button" class="btn green">取消</button>                <button type="button" class="btn">默认</button>            </div>        </div>    </div>-->    <button id="btn1" type="button" class="btn">默认 loading 弹窗</button>    <button id="btn2" type="button" class="btn">ok 弹窗, 2s 后自动关闭</button>    <button id="btn3" type="button" class="btn">ok 弹窗, 2s 后自动关闭, 遮罩层 为 0.3 </button>    <button id="btn4" type="button" class="btn">默认 loading 弹窗, 点击遮罩层不能关闭窗口</button>    <button id="btn5" type="button" class="btn">带有buttons</button></body><script src="zepto.js"></script><script src="dialog.js"></script><script>    $('#btn1').click(function () {       var dg1 = $.dialog();    });    $('#btn2').click(function () {        var dg2 = $.dialog({            type: 'ok',            delay: 2000        });    });    $('#btn3').click(function () {        var dg3 = $.dialog({            type: 'ok',            delay: 2000,            maskOpacity: 0.3        });    });    $('#btn4').click(function () {        var dg4 = $.dialog({            content: '点击mask不能关闭窗口',            maskClose: false        });    });    $('#btn5').click(function () {        var dg5 = $.dialog({            type: 'warning',            content: '你确定要删除此项目吗？',            buttons: [                {                    type: 'danger',                    text: '确认',                    callback: function () {                        alert('alert');                        return true;                    }                }, {                    type: 'default',                    text: '取消',                    callback: function () {                        alert('取消');                    }                }            ]        });    });</script></html>

- dialog.css

.g-dialog-container {    position: fixed;    left: 0;    top: 0;    right: 0;    bottom: 0;    width: 100%;    height: 100%;    display: flex;    justify-content: center;    align-items: center;    background-color: rgba(0, 0, 0, 0.6);}.g-dialog-container .g-dialog-window {    padding: 1em;    border-radius: 10px;    background-color: rgba(0, 0, 0, 0.8);    transition: all .3s cubic-bezier(0.65,-0.08, 0.32, 1.25);}.g-dialog-container .g-dialog-window .g-dialog-header {    width: 50px;    height: 50px;    margin: 0 auto;    border: 2px solid #fff;    border-radius: 50%;    display: flex;    justify-content: center;    align-items: center;}.g-dialog-container .g-dialog-window .g-dialog-header.ok:after {    content: '';    display: block;    width: 20px;    height: 8px;    border-left: 2px solid #fff;    border-bottom: 2px solid #fff;    transform: rotateZ(-45deg);}.g-dialog-container .g-dialog-window .g-dialog-header.warning {    transform: rotateZ(90deg);}.g-dialog-container .g-dialog-window .g-dialog-header.warning:before {    content: '';    display: block;    width: 20px;    height: 5px;    background-color: #fff;}.g-dialog-container .g-dialog-window .g-dialog-header.warning:after {    content: '';    display: block;    width: 5px;    height: 5px;    border-radius: 5px;    margin-left: 5px;    background-color: #fff;}@keyframes loading-1 {    0% {        transform: translateX(-4px);    }    50% {        transform: translateX(8px);    }    100% {        transform: translateX(-4px);    }}@keyframes loading-2 {    0% {        transform: translateX(4px);    }    50% {        transform: translateX(-8px);    }    100% {        transform: translateX(4px);    }}.g-dialog-container .g-dialog-window .g-dialog-header.loading:before {    content: '';    display: block;    width: 8px;    height: 8px;    border-radius: 8px;    background-color: aquamarine;    animation: loading-1 0.8s infinite;}.g-dialog-container .g-dialog-window .g-dialog-header.loading:after {    content: '';    display: block;    width: 8px;    height: 8px;    border-radius: 8px;    background-color: #d35400;    animation: loading-2 0.8s infinite;}.g-dialog-container .g-dialog-window .g-dialog-content {    color: #fff;    padding: 1em 1em 0;    line-height: 180%;    text-align: center;}.g-dialog-container .g-dialog-window .g-dialog-footer {    display: flex;    justify-content: center;    align-items: center;    margin: 0.3em 0;}.g-dialog-container .g-dialog-window .g-dialog-footer .btn {    display: block;    border-radius: 3px;    padding: 0.8em 1.8em;    margin: 0.3em;    color: #fff;    text-shadow: #666 1px 1px;    background-color: #ccc;    border: none;    -webkit-appearance: none;}.g-dialog-container .g-dialog-window .g-dialog-footer .btn.default {    background-color: #ccc;}.g-dialog-container .g-dialog-window .g-dialog-footer .btn.danger {    background-color: #d35400;}.g-dialog-container .g-dialog-window .g-dialog-footer .btn.success {    background-color: #077B01;}

js 组件开发
- 组件具备哪些功能
- 组件的调用方式，也就是怎么设计组件的参数配置，对应不同的组件功能
- 组件优化，包括 css，js 等
- 根据业务，思考是否扩展组件
- dialog.js

/** * Created by wikid on 3/2/17. */;(function ($) {    /*     弹出框基本的 html 结构     <div class="g-dialog-container">         <div class="g-dialog-window">             <div class="g-dialog-header loading"></div>             <div class="g-dialog-content">正在拼命加载中</div>             <div class="g-dialog-footer">                 <button type="button" class="btn red">删除</button>                 <button type="button" class="btn green">取消</button>                 <button type="button" class="btn">默认</button>             </div>         </div>     </div>     */    function Dialog(config) {        var customConfig = config || {};        this.config = {            // 弹出框的类型            type: 'loading',            // 文字信息            content: null,            // 延迟多长时间关闭, 默认 3s 后关闭            delay: null,            // 延迟关闭时，回调函数            delayCallback: null,            // 遮罩层透明度            maskOpacity: null,            // 点击遮罩层可以关闭窗口            maskClose: true,            // 动画            animation: true,            /* 按钮 组            buttons: [                {                    type: 'danger',                    text: '确认',                    callback: function () {                        console.log(this);                        alert('alert');                    }                }, {                    type: 'default',                    text: '取消',                    callback: function () {                        alert('取消');                    }                }            ]             */            buttons: null        };        $.extend(this.config, customConfig);        // 创建基本的 dom 结构        this.body = $('body');        // 遮罩层        this.mask = $('<div class="g-dialog-container"></div>');        // 弹出框        this.win = $('<div class="g-dialog-window"></div>');        // header， 对应的是 icon 的类型        this.header = $('<div class="g-dialog-header"></div>');        // 提示文字        this.content = $('<div class="g-dialog-content"></div>');        // footer, 用来包含操作按钮的        this.footer = $('<div class="g-dialog-footer"></div>');        // 初始化        this.init();    }    Dialog.zIndex = 10000;    Dialog.prototype = {        init: function () {            var self = this;            var config = this.config,                body = this.body,                mask = this.mask,                win = this.win,                header = this.header,                content = this.content,                footer = this.footer;            // 层级 ＋1            Dialog.zIndex ++;            mask.css('zIndex', Dialog.zIndex);            // icon           win.append(header.addClass(config.type));            // message            config.content && win.append(content.html(config.content));            // button            if (config.buttons) {                this.createButtons(footer, config.buttons);                win.append(footer);            }            // 延迟 自动 关闭            if (config.delay && config.delay !== 0) {                window.setTimeout(function () {                    if (self.delayCallback) {                        self.delayCallback();                    } else {                        self.close();                    }                }, self.config.delay);            }            // mask -- opacity            if (config.maskOpacity) {                mask.css('backgroundColor', 'rgba(0, 0, 0, ' + config.maskOpacity + ')');            }            // mask -- close            if (config.maskClose) {                mask.click(function () {                    self.mask.remove();                });            }            // animation            if (config.animation) {                this.animation();            }            mask.append(win);            body.append(mask);        },        close: function () {            this.mask.remove();        },        animation: function() {            var self = this;            this.win.css('transform', 'scale(0, 0)');            window.setTimeout(function () {                self.win.css('transform', 'scale(1, 1)');            }, 200);        },        createButtons: function (footer, buttons) {            var self = this;            $(buttons).each(function (index, item) {                var domBtn = $('<button type="button" class="btn '+ item.type +'">'+  item.text +'</button>');                if (item.callback) {                    domBtn.click(function (e) {                        // 阻止冒泡事件                        e.stopPropagation();                        if (item.callback()) {                            self.close()                        }                    })                }                footer.append(domBtn);            })        }    };    window.Dialog = Dialog;    $.dialog = function (config) {        return new Dialog(config);    }})(Zepto);

0 0

移动端弹出框组件 － Dialog

移动端弹出框组件 － Dialog

一、使用方式

二、设计思路

移动端弹出框组件－ Dialog

移动端弹出框组件－ Dialog