/** 姓名:冯宇 site: http://fy.035k.com 更新时间 :2018-04-02 更新内容 :添加actionsheet QQ : 515184405 github : https://github.com/515184405/alert 还有一些其他的项目哦,欢迎star **/ ;(function(){ var zIndex = 1000; var jqueryAlert = function(opts){ // 设置默认参数 var opt = { 'style' : 'wap', //移动端和PC端 'title' : '', //标题 'icon' : '', 'content' : '', //内容 'contentTextAlign' : 'center', //内容对齐方式 'width' : 'auto', //宽度 'height' : 'auto', //高度 'minWidth' : '0', //最小宽度 "className" : '', //添加类名 'position' : 'fixed', //定位方式 'animateType' : 'scale', 'modal' : false, //是否存在蒙层 'isModalClose' : false, //点击蒙层是否关闭 'bodyScroll' : false, //是否关闭body的滚动条 'closeTime' : 3000, //当没有按钮时关闭时间 'actionsheetCloseText' : '', //当当前样式为actionsheet时,关闭的文字按钮 "buttons" : {}, //按钮对象 "end" : function(){} }; // 参数合并 var option = $.extend({},opt,opts); var dialog = { }; dialog.time = 450;//动画关闭时间 dialog.init = function(){ dialog.framework(); }; // 事件处理 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } var isHaveTouch = IsPC(); if(isHaveTouch){ dialog.event = 'click'; }else{ dialog.event = 'touchstart'; } var $modal = $("
"+ option.actionsheetCloseText +"
"); if(!!option.content[0] && (1 == option.content[0].nodeType)){ var $newContent = option.content.clone(); $content.append($newContent) }else{ $content.html(option.content); } dialog.framework = function(){ dialog.buttons = []; for(var key in option.buttons){ dialog.buttons.push(key); } dialog.buttonsLength = dialog.buttons.length; option.style == 'actionsheet' ? $container.append($title) : $container.append($title) .append($content); if(option.style == 'pc'){ $container.append($closeBtn).addClass('pcAlert'); } if(option.style == 'actionsheet'){ $container.addClass('alert-actionsheet'); } if(option.modal || option.modal == 'true'){ $('body').append($modal); $modal.fadeIn(dialog.time); option.bodyScroll && $('body').css('overflow','hidden'); } $('body').append($container); // 设置内容的对齐方式 $content.css({ 'text-align' : option.contentTextAlign }); if(parseInt(option.minWidth) > parseInt($container.css('width'))){ option.width = option.minWidth; } $modal.css('position',option.position); $modal.css('z-index',zIndex); ++zIndex; if(option.position == 'fixed'){ $container.css({ 'position' : option.position, 'left' : '50%', 'top' : '45%', 'z-index' : zIndex }); } if(option.position == 'absolute'){ $container.css({ 'position' : option.position, 'left' : $(window).width()/2, 'top' : $(window).height()/2 + $(window).scrollTop(), 'z-index' : zIndex }); } $container.css('width',option.width); $container.css('height',option.height); if(option.width == 'auto'){ $container.css('width',$container[0].clientWidth + 10); } if(parseInt($(window).height()) <= parseInt($container.css('height'))){ $container.css('height',$(window).height()); } // 设置class (!!option.className) && $container.addClass(option.className); // 设置button内容 var indexs = 0; for(var key in option.buttons){ indexs++; var $button = $(""+ key +"
"); if(option.style == 'wap'){ $button.css({ 'width' : Math.floor(($container[0].clientWidth) / dialog.buttonsLength), }) } //绑定点击后的事件 $button.bind(dialog.event,option.buttons[key]); $buttonBox.append($button); } if(dialog.buttonsLength > 0){ $container.append($buttonBox); $content.css('padding-bottom','46px'); //处理IE下滚动条的问题 if (window.navigator.userAgent.indexOf("MSIE")>=1) { if($content[0].scrollHeight > $content[0].clientHeight){ $content.css('height',parseInt($content.css('height')) - 46 ); } } } if(option.title != ''){ $content.css('padding-top','42px'); } if(dialog.buttonsLength <= 0 && option.title == ''){ $container.addClass('alert-container-black'); if(!!option.icon){ var img = new Image(); img.onload = function(){ $content.before(img); }; img.src = option.icon; $(img).css({ 'width':'45px', 'height' : 'auto', 'display':'block', 'margin' : '10px auto 0 auto' }); $content.css({ 'padding-top' : '5px' }) } } // 设置定位 $container.css({ 'margin-left' : -parseInt($container.css('width'))/2, 'margin-top' : -parseInt($container.css('height'))/2, }); if( option.style == 'actionsheet' ){ $container.css({ 'position' : 'fixed', 'left' : 0, 'top' : 'auto', 'bottom' : '-100%', 'z-index' : zIndex, 'margin' : 0, 'width' : '100%', 'height' : 'auto' }); $container.animate({ 'bottom' : '0' },dialog.time); } if(option.style != 'actionsheet' && option.animateType == 'scale'){ $container.addClass('bounceIn'); } if(option.style != 'actionsheet' && option.animateType == 'linear'){ $container.addClass('linearTop'); } if(option.actionsheetCloseText){ $buttonBox.append($actionsheetCloseBtn); $(document).delegate('.alert-btn-sheet,.alert-modal','click',function(){ dialog.close(); }) } isSelfClose(); }; // 判断是否满足自动关闭的条件 function isSelfClose(){ if(dialog.buttonsLength <= 0 && option.style == 'wap'){ setTimeout(function(){ $container.fadeOut(dialog.time); $modal.fadeOut(dialog.time); option.bodyScroll && $('body').css('overflow','auto'); !!option.end && (typeof(option.end) == 'function' ? option.end() : console.warn('弹框关闭后的回调函数是个FUNCTION')); },option.closeTime) } } dialog.toggleAnimate = function(){ if(option.style != 'actionsheet'){ if(option.animateType == 'scale'){ return $container.removeClass('bounceIn').addClass('bounceOut'); }else if(option.animateType == 'linear'){ return $container.removeClass('linearTop').addClass('linearBottom'); }else{ return $container; }; }else{ return $container.animate({ 'bottom' : '-100%' },dialog.time); } }; dialog.close = function(){ dialog.toggleAnimate().fadeOut(dialog.time); $modal.fadeOut(dialog.time); option.bodyScroll && $('body').css('overflow','auto'); !!option.end && (typeof(option.end) == 'function' ? option.end() : console.warn('弹框关闭后的回调函数是个FUNCTION')); }; option.style == 'pc' && $closeBtn.bind(dialog.event,dialog.close); option.isModalClose && $modal.bind(dialog.event,dialog.close); dialog.destroy = function(){ dialog.toggleAnimate().fadeOut(dialog.time); setTimeout(function(){ $container.remove(); $modal.remove(); option.bodyScroll && $('body').css('overflow','auto'); },dialog.time) }; dialog.show = function(){ $modal.css('z-index',zIndex); ++zIndex; $container.css({ 'z-index' : zIndex }); if( option.style != 'actionsheet' ){ if(option.animateType == 'scale'){ $container.fadeIn(dialog.time).removeClass('bounceOut').addClass('bounceIn'); }else if(option.animateType == 'linear'){ $container.fadeIn(dialog.time).removeClass('linearBottom').addClass('linearTop'); }else{ $container.fadeIn(dialog.time); } if(option.position == 'absolute'){ $container.css({ 'top' : $(window).height()/2 + $(window).scrollTop(), }) } }else{ $container.fadeIn(0).animate({ 'bottom' : '0' },dialog.time); } $modal.fadeIn(dialog.time); option.bodyScroll && option.modal && $('body').css('overflow','hidden'); isSelfClose(); }; dialog.init(); console.log(dialog); return dialog }; if (typeof module !== 'undefined' && typeof exports === 'object') { module.exports = jqueryAlert; } else if (typeof define === 'function' && (define.amd || define.cmd)) { define(function() { return jqueryAlert; }); } else { this.jqueryAlert = jqueryAlert; } }).call(function() { return this || (typeof window !== 'undefined' ? window : global); }());