甜甜的泥土

sharonTips

  1. toast
  2. 询问窗
  3. 弹窗输入值
  4. 普通弹窗

toast弹窗

简单的弹窗提示文字,无入侵式,在用户交互中使用最多的效果。

询问窗

根据用户操作,执行不同逻辑的询问框,可以在调用的时候,自定义yes的回调函数和no的回调函数,可自定义提示内容。

弹窗输入值

之前用layer的时候,不能验证输入值,所以才写了这个插件,本插件在调用输入弹窗的时候,可以定义好验证规则,如果输入不合法,则不能执行yes的回调。

普通弹窗

正常的alert弹窗,可以直接插入html元素,展示你需要的 内容。

一些后话

layer是一个很优秀的弹窗插件,功能覆盖面大,且兼容变态的IE浏览器。而我封装的插件,为了代码的简洁,只兼容现代浏览器,而且今后也不打算做兼容,如果你打算用到项目上,请确保你的项目不需要兼容IE浏览器。

                    
var sharonTips = {
    toast:function(message) {
        var toast = document.createElement('div');
        toast.className = 'sharonTips-toast anim-bounceInOut';
        toast.innerHTML = message;
        document.body.appendChild(toast);
        toast.style.marginLeft = -parseInt(toast.offsetWidth/2) + 'px';
    
        toast.addEventListener('webkitAnimationEnd', function() {
            toast.parentNode && toast.parentNode.removeChild(toast);
        });
    },
    createBox:function(exclusiveClass,opt){
        sharonTips.createShade();

        // 弹窗
        var sharonTipBox = document.createElement('div');
        sharonTipBox.className = exclusiveClass +' sharonTips anim-bounceIn';
        
        // 标题
        var titleTxt = opt.title || '信息';
        var title = '
'+titleTxt+'
'; sharonTipBox.innerHTML = title; // 内容 var content = document.createElement('div'); content.className = 'sharonTips-content'; // 说明是询问弹窗 if(exclusiveClass === 'sharonTips-confirm'){ opt.message && (content.innerHTML = opt.message); } // 说明是输入弹窗 if (exclusiveClass === 'sharonTips-prompt') { var _input = document.createElement('input'); if (opt.inputType) { _input.type = opt.inputType; }else{ _input.type = 'text'; _input.value = ''; } content.appendChild(_input); } // 说明是普通弹窗 if (exclusiveClass === 'sharonTips-alert') { content.innerHTML = opt.html; } sharonTipBox.appendChild(content); // 关闭按钮 var closeBtn = ''; sharonTipBox.innerHTML += closeBtn; // 操作按钮 if(opt.btn){ var yesBtn = opt.btn[0] || '确定'; var noBtn = opt.btn[1] || '取消'; var btn = ''; sharonTipBox.innerHTML += btn; } // 位置 document.body.appendChild(sharonTipBox); sharonTipBox.style.marginLeft = -parseInt(sharonTipBox.offsetWidth/2) + 'px'; sharonTipBox.style.marginTop = -parseInt(sharonTipBox.offsetHeight/2) + 'px'; // 事件 sharonTipBox.addEventListener('click',function(event){ var elem = event.target; if(elem.classList.contains('yesBtn')){ if (exclusiveClass === 'sharonTips-prompt') { // 输入弹窗需要验证 var _val = sharonTipBox.querySelector('input').value; if(_val && opt.Reg.test(_val)){ sharonTips.closeSharonTips(elem); opt.yes && opt.yes(); return true; }else{ sharonTips.toast('输入格式不正确!'); } return false; } sharonTips.closeSharonTips(elem); opt.yes && opt.yes(); } if(elem.classList.contains('noBtn')){ sharonTips.closeSharonTips(elem); opt.no && opt.no(); } if(elem.classList.contains('sharonTips-close')){ sharonTips.closeSharonTips(elem); } event.preventDefault(); event.stopPropagation(); }); }, confirm:function(opt){ sharonTips.createBox('sharonTips-confirm',opt); }, prompt:function(opt){ sharonTips.createBox('sharonTips-prompt',opt); }, alert:function(opt){ sharonTips.createBox('sharonTips-alert',opt); }, closeSharonTips:function(elem){ //关闭窗口 var SharonTips = elem.parentNode; while (!SharonTips.classList.contains('sharonTips')) { SharonTips = SharonTips.parentNode; } SharonTips.parentNode && SharonTips.parentNode.removeChild(SharonTips); sharonTips.removeShade(); }, createShade:function(){ // 创建遮罩 if(!document.querySelector('.sharonTips-shade')){ var shade = document.createElement('div'); shade.className = 'sharonTips-shade'; document.body.appendChild(shade); } }, removeShade:function(){ // 关闭遮罩 var shade = document.querySelector('.sharonTips-shade'); shade && shade.parentNode && shade.parentNode.removeChild(shade); } }; var oConfirm = document.querySelector('.confirm'); var oPrompt = document.querySelector('.prompt'); var oAlert = document.querySelector('.alert'); oConfirm.addEventListener('click',function(){ sharonTips.confirm({ title:'你觉得我帅吗?', message:'请认真回答!', btn:['帅','丑'], yes:function(){ sharonTips.toast('你真有眼光!'); }, no:function(){ sharonTips.confirm({ title:'你傻逼吗?', message:'这都会选错?', btn:['我傻','我笨'], yes:function(){ sharonTips.toast('态度不错!'); }, no:function(){ sharonTips.toast('原谅你了!'); } }); } }); }); oPrompt.addEventListener('click',function(){ sharonTips.prompt({ title:'填写你的号码', btn:['好的','不写'], //inputType:'password', Reg:/^1[34578]\d{9}$/, yes:function(){ sharonTips.toast('你写好了'); }, no:function(){ sharonTips.confirm({ title:'你居然不写?', message:'这么任性?', btn:['没错','不理'], yes:function(){ sharonTips.toast('你屌!'); }, no:function(){ sharonTips.toast('你牛!'); } }); } }); }); oAlert.addEventListener('click',function(){ sharonTips.alert({ title:'我是普通弹窗', html:'

dfdsfsdfs

', close:function(){ sharonTips.toast('你关闭了我!'); } }); });