仿照IOS系统弹出提示外观-小程序开发/公众号开发-厦门锐道系统开发公司
当前位置:平台首页 > > 仿照IOS系统弹出提示外观

仿照IOS系统弹出提示外观

对IOS系统弹出框的实现要求如下:

1. 仿照IOS系统弹出外观

2. 自定义按钮文字

3. 宽高自适应(有最小宽、最大宽限制)

4. 实现弹出框关闭(前、后)的回调 (重点)由于很多操作都是在弹出框显示时操作的


/**

 * LBS iTips (仿iPhone界面版) 

 * Date: 2015-10-25 

 * ====================================================================

 * 1. 宽高自适应(maxWidth:300 minWidth:250)  引入iTips.css iTips.js (建议js css 放在同一目录)

 * ====================================================================

 * 2. 调用方式1: 

    Tips.alert(option) //显示(确定)按钮 

    Tips.confirm(option) //显示(确定 取消)按钮  option.after(boolean) boolean布尔值 确定true 取消false

    Tips.open(option) //无显示按钮 可设置定时关闭 默认不自动关闭需手动关闭

    Tips.close() //手动调用关闭 (方式1/方式2都可以调用)

    * Tips.show(text) // 显示加载提示框 text为弹出文本 默认加载中 

     * Tips.hide() // 隐藏加载提示框

 * ====================================================================

 * 3. 调用方式2:

     Tips.alert(content,fn) //content内容 fn弹出框关闭后执行函数 相当于option.after

     Tips.confirm(content,fn) //fn(boolean) boolean布尔值 确定true 取消false

     Tips.open(content, time) //time自动关闭时间(单位秒) 默认不自动关闭需手动关闭 

 * ====================================================================

 * 4. option选项:

     content:内容(可带html标签自定义样式)

     before: 点击确定按钮 关闭弹出框前 执行函数  (Tips.alert Tips.confirm中有效)

             如果函数返回false 则不会执行(关闭弹出框)和(after) 一般用于做一些检测

     after: 点击确定按钮 关闭弹出框后 执行函数 (Tips.alert Tips.confirm中有效)

     time: 自动关闭时间(单位秒) time 秒后关闭 (Tips.open中有效) 

     define: 定义确定按钮的文本 (Tips.alert Tips.confirm中有效)

     cancel: 定义取消按钮的文本 (Tips.confirm中有效)

 * ====================================================================

 * Tips.BG //遮罩层

 * Tips.Box //弹出框

 * Tips.define //确定按钮

 * Tips.cancel //取消按钮 

 * ====================================================================

**/

;(function() {

    window.Tips = {

        _create: function() {

            if (!this.Box) {

                var body = document.getElementsByTagName('body')[0],

                    html = '<div id="tips_content"></div><div id="tips_foot"><a href="javascript:;" id="tips_cancel">取消</a><a href="javascript:;" id="tips_define">确定</a></div>';

                this.BG = document.createElement('div');

                this.BG.id = 'tips_mask';

                this.Box = document.createElement('div');

                this.Box.id = 'tips_box';

                this.Box.innerHTML = html;

                body.appendChild(this.BG);

                body.appendChild(this.Box);

                this.content = this.$('#tips_content');

                this.foot = this.$('#tips_foot');

                this.define = this.$('#tips_define');

                this.cancel = this.$('#tips_cancel');

            }

        },

        minWidth: 250,

        maxWidth: 300,

        _show: function() {

            this._fix = true;

            this.BG.style.display = 'block';

            this.Box.style.display = 'block';

            this._css();

            this._bind();

        },

        _hide: function() {

            this._fix = false;

            this.BG.style.display = 'none';

            this.Box.style.display = 'none';

            this._unbind();

        },

        _pos: function() {

            var d = document,

                doc = d.documentElement,

                body = d.body;

            this.pH = doc.scrollHeight || body.scrollHeight;

            this.sY = doc.scrollTop || body.scrollTop;

            this.wW = doc.clientWidth;

            this.wH = doc.clientHeight;

            if (document.compatMode != "CSS1Compat") {

                this.pH = body.scrollHeight;

                this.sY = body.scrollTop;

                this.wW = body.clientWidth;

                this.wH = body.clientHeight;

            }

        },

        _css: function() {

            this._pos();

            this.BG.style.height = Math.max(this.pH, this.wH) + 'px';

            this.Box.style.width = 'auto';

            this.content.style.cssText = 'float:left';

            var cW = this.content.offsetWidth;

            this.content.style.cssText = '';

            // width max:300 min:200

            if (cW < this.minWidth) cW = this.minWidth;

            if (cW > this.maxWidth) {

                cW = this.maxWidth;

                // this.content.style.whiteSpace = '';

                this.content.style.whiteSpace = 'normal';

            }

            this.Box.style.width = cW + 'px';

            // absolute

            // this.Box.style.left = (this.wW - cW) / 2 + 'px';

            // this.Box.style.top = this.sY + (this.wH - this.Box.offsetHeight) / 2 + 'px';

            // fixed 1

            // this.Box.style.marginLeft = -(cW / 2) + 'px';

            // this.Box.style.marginTop = -(this.Box.offsetHeight / 2) + 'px';

            // fixed 2

            this.Box.style.marginLeft = -(cW / 2) + 'px';

            this.Box.style.top = (this.wH - this.Box.offsetHeight) / 2 + 'px';

        },

        _fixSize: function() {

            var _this = this,

                time = +new Date();

            this._timeid && clearInterval(this._timeid);

            this._timeid = setInterval(function() {

                if (+new Date() - time > 1000) {

                    clearInterval(_this._timeid);

                    _this._timeid = null;

                    return false;

                }

                _this._css();

            }, 250);

        },

        _define: function(option) {

            var _this = this;

            this.define.onclick = function(e) {

                e.stopPropagation();

                if (typeof option === 'function') {

                    _this._hide();

                    _this.Bool = true;

                    option && option(_this.Bool);

                    return;

                }

                var before = option.before && option.before();

                var bool = false;

                before === false && (bool = true);

                if (bool) {

                    e.stopPropagation();

                    return false;

                }

                _this._hide();

                _this.Bool = true;

                option.after && option.after(_this.Bool);

            };

        },

        _cancel: function(option) {

            var _this = this;

            this.cancel.onclick = function(e) {

                e.stopPropagation();

                _this._hide();

                _this.Bool = false;

                if (typeof option === 'function') {

                    option && option(_this.Bool);

                    return;

                }

                option.after && option.after(_this.Bool);

            };

        },

        _bind: function() {

            this.Box.focus();

            this._setEvent();

        },

        _unbind: function() {

            this.Box.blur();

            this.define.onclick = null;

            this.cancel.onclick = null;

            this.define.innerText = '确定';

            this.cancel.innerText = '取消';

            this._timer && clearTimeout(this._timer);

            this._timer = null;

            this._timeid && clearInterval(this._timeid);

            this._timeid = null;

        },

        _setEvent: function() {

            var _this = this;

            this.on(this.BG, 'touchmove', function(e) {

                e.preventDefault();

            });

            this.on(this.Box, 'touchmove', function(e) {

                e.preventDefault();

            });

            this.on(this.define, 'touchstart', function(e) {

                _this.define.className.indexOf('tips_hover') < 0 && (_this.define.className += ' tips_hover');

            });

            this.on(this.define, 'touchend', function(e) {

                _this.define.className = _this.define.className.replace('tips_hover', '').trim();

            });

            this.on(this.cancel, 'touchstart', function(e) {

                _this.cancel.className.indexOf('tips_hover') < 0 && (_this.cancel.className += ' tips_hover');

            });

            this.on(this.cancel, 'touchend', function(e) {

                _this.cancel.className = _this.cancel.className.replace('tips_hover', '').trim();

            });

            this.on(window, 'resize', function(e) {

                if (!_this._fix) return;

                _this._fixSize();

            });

        },

        _setBtn: function(n, option) {

            this.foot.style.display = 'block';

            this.define.style.display = '';

            this.cancel.style.display = '';

            switch (parseInt(n)) {

                case 1:

                    this.define.className = 'tips_define';

                    this.cancel.style.display = 'none';

                    if (typeof option === 'function') {

                        this.define.innerText = '确定';

                        this._define(function() {

                            option && option();

                        });

                    } else {

                        this.define.innerText = option.define || '确定';

                        this._define(option);

                    }

                    break;

                case 2:

                    this.define.className = '';

                    if (typeof option === 'function') {

                        this.define.innerText = '确定';

                        this.cancel.innerText = '取消';

                        this._define(function(b) {

                            option && option(b);

                        });

                        this._cancel(function(b) {

                            option && option(b);

                        });

                    } else {

                        this.define.innerText = option.define || '确定';

                        this.cancel.innerText = option.cancel || '取消';

                        this._define(option);

                        this._cancel(option);

                    }

                    break;

                case 0:

                    this.foot.style.display = 'none';

                    this.define.style.display = 'none';

                    this.cancel.style.display = 'none';

                    break;

            }

        },

        _setContent: function(html) {

            this.content.innerHTML = html+'';

        },

        _setOption: function(option, n, fn) {

            var content = '';

            this._create();

            if (typeof option === 'string' || typeof option === 'number') {

                content = option || '';

                this._setBtn(n, function(b) {

                    fn && fn(b);

                });

            } else {

                option = option || {},

                    content = option.content || '';

                this._setBtn(n, option);

            }

            this._setContent(content);

            this._show();

        },

        _setTime: function(option, t) {

            var time = 0,

                _this = this;

            time = (typeof option === 'string' ? t : option.time);

            if (parseInt(time) > 0) {

                this._timer = setTimeout(function() {

                    _this._hide();

                }, time * 1000);

            }

        },

        on: function(el, type, handler) {

            el.addEventListener(type, handler, false);

        },

        off: function(el, type, handler) {

            el.removeEventListener(type, handler, false);

        },

        $: function(s) {

            return document.querySelector(s);

        },

        alert: function(option, fn) {

            this._setOption(option, 1, fn);

        },

        confirm: function(option, fn) {

            this._setOption(option, 2, function(b) {

                fn && fn(b);

            });

        },

        open: function(option, t) {

            this._setOption(option, 0);

            this._setTime(option, t);

        },

        close: function() {

            this._hide();

        }

    };

}());


查看完整的css代码

#tips_mask, #tips_box *{margin:0;padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #333; }


/* absolute */

/*

#tips_mask{display:none;position:absolute;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.3);}

#tips_box{display:none;position:absolute; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}

*/


/* fixed 1*/

/*

#tips_mask{display:none;position:fixed;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.3);}

#tips_box{display:none;position:fixed; left: 50%; top:50%; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}

*/


/* fixed 2*/

#tips_mask{display:none;position:fixed;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.5);}

#tips_box{display:none;position:fixed; left: 50%; top:0; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}


#tips_content{padding:25px 20px; text-align:center; overflow: hidden; font-size:16px; line-height:1.5; white-space: nowrap; /* 不换行 */  border-radius:10px 10px 0 0;  }

#tips_foot{position:relative; overflow: hidden; height:48px; font-size: 0; line-height:48px; text-align:center; border-top:1px solid #EBEBEB; border-radius:0 0 10px 10px;}

#tips_foot a{position:relative; display:inline-block; width:50%; text-align:center; font-size:18px; text-decoration: none; outline: none; color: #0FA5F5; }

#tips_foot a:first-child{border-radius:0 0 0 10px; }

#tips_foot a:last-child{ border-radius:0 0 10px 0; }

#tips_foot a.tips_define{ width: 100%; background: #FFF; border-radius:0 0 10px 10px;}

#tips_foot a.tips_hover{ background: #e8e8e8; }

#tips_foot:before{content:'';position:absolute; width:1px; height:48px; margin-left: -1px; left:50%; top:0; background:#EBEBEB;}

-webkit-keyframes bounceIn{

    0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}

    100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}

}

@keyframes bounceIn{

    0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}

    100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}

}


阅读:811

相关阅读

支付宝扫码支付 0
请使用支付宝扫一扫
扫描二维码支付