如何制作类似layer效果的弹窗，实现长尾词搜索功能？

本文共计1001个文字，预计阅读时间需要5分钟。

javascript// 定义模板类var Template=function(template) { this.template=template;};

// 格式化模板Template.prototype.format=function(arg) { return this.template.replace(/@\{([^\{\}]+)\}/g, function(a, b) { return arg[b] || ''; });};

js部分

;(function ($) { var Template = function (template) { this.template = template; }; Template.prototype.format = function (arg) { return this.template.replace(/[@]{1}([^@].+?[^@])[@]{1}/g, function (a, b) { return arg[b] || ''; }); }; window.Template = Template; })(Zepto || $); ;(function ($) { var Layer = function () { this.template = new Template(' \ \ \

\ @content@ \ @buttonArea@\

\ \ '); this.data = { animationClass: 'layout-layer_animation_scale', content: '', delay: 5, shadeClose: false, callback: function () {} }; }; Layer.prototype.isObject = function (fn) { return typeof fn === 'object' || Object.prototype.toString.call(fn) === '[object object]'; }; Layer.prototype.isCallable = function (fn) { return typeof fn === 'function' || Object.prototype.toString.call(fn) === '[object Function]'; }; Layer.prototype.extends = function (params) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); if (O.isObject(params)) { !params.hasOwnProperty('animationClass') && (params.animationClass = O.data.animationClass); !params.hasOwnProperty('content') && (params.content = O.data.content); !params.hasOwnProperty('delay') && (params.delay = O.data.delay); !params.hasOwnProperty('shadeClose') && (params.shadeClose = O.data.shadeClose); !params.hasOwnProperty('callback') && (params.callback = O.data.callback); !params.hasOwnProperty('yes') && (params.yes = O.data.yes); !params.hasOwnProperty('no') && (params.no = O.data.no); } else { params = O.data; } return params; }; Layer.prototype.confirm = function (params) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); O.data.yes = function () {}; O.data.no = function () {}; O.data.animationClass = 'layout-layer_animation_scale'; var data = O.extends(params); data.delay = ''; data.buttonArea = ' 取消 确定 '; var $element = $(' ', {html: this.template.format(data), class: 'layout-layer'}).appendTo($('body')); O.after($element, data); $element.find('#object-layer_yes').click(function () { layer.close($element, data.yes); }); $element.find('#object-layer_no').click(function () { layer.close($element, data.no); }); return $element; }; Layer.prototype.alert = function (params) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); O.data.animationClass = 'layout-layer_animation_scale'; var data = O.extends(params); var $element = $(' ', {html: this.template.format(data), class: 'layout-layer'}).appendTo($('body')); O.after($element, data); return $element; }; Layer.prototype.loading = function (params) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); O.data.animationClass = 'layout-layer_animation_loading'; var data = O.extends(params); data.delay = ''; if (data.content) { data.content = '

' + data.content + '

'; } else { data.content = ''; } var $element = $(' ', {html: this.template.format(data), class: 'layout-layer'}).appendTo($('body')); O.after($element, data); return $element; }; Layer.prototype.delay = function ($time, foo) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); if (!O.isCallable(foo)) { throw new TypeError('foo is uncallable'); } return setTimeout(function () { foo.call(foo); }, $time * 1E3); }; Layer.prototype.close = function ($element, callback) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); O.isObject($element) ? $element.remove() : null; O.isCallable(callback) ? callback.call(callback) : null; } Layer.prototype.after = function ($element, params) { if (this == null) { throw new TypeError('this is null or not defined'); } var O = Object(this); if (!O.isObject($element)) { throw new TypeError('element must be object'); } if (!O.isObject(params)) { throw new TypeError('params must be object'); } if (typeof params.delay == 'number') { var delayTimer = O.delay(params.delay, function () { O.close($element, params.callback); }); } if (params.shadeClose) { $element.find('.layout-layer_shade').click(function () { O.close($element, params.callback); (typeof delayTimer != undefined) && clearTimeout(delayTimer); }); } } window.layer = new Layer(); })(Zepto || $); css部分

.layout-layer, .layout-layer_shade, .layout-layer_main { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .layout-layer { z-index: 19891014; } .layout-layer_shade { background-color: rgba(0,0,0,.7); pointer-events: auto; } .layout-layer_main { display: table; pointer-events: none; } .layout-layer_box { display: table-cell; vertical-align: middle; text-align: center; } .layout-layer_section { width: 90%; max-width: 640px; position: relative; display: inline-block; background-color: #FFFFFF; font-size: 14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0,0,0,.1); pointer-events: auto; animation-fill-mode: both; animation-duration: .2s; -webkit-animation-duration: .2s; -webkit-animation-fill-mode: both; overflow: hidden; } .layout-layer_contents { padding: 1.875rem 1.875rem; line-height: 1.375rem; text-align: center; } .layout-layer_contents i { width: 25px; height: 25px; margin-left: 8px; display: inline-block; background-color: #fff; border-radius: 100%; -webkit-animation: layout-layer_animation_loading 1.4s infinite ease-in-out; animation: layout-layer_animation_loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .layout-layer_contents i:first-child { margin-left: 0; -webkit-animation-delay: -.32s; animation-delay: -.32s; } .layout-layer_contents i.layout-layer_loading { -webkit-animation-delay: -.16s; animation-delay: -.16s; } .layout-layer_contents .layout-layer_loading_font { color: #FFFFFF; } .layout-layer_button { display: box; display: -moz-box; display: -webkit-box; width: 100%; height: 50px; line-height: 50px; font-size: 0; border-top: 1px solid #D0D0D0; background-color: #F2F2F2 } .layout-layer_button span { display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; font-size: 14px; cursor: pointer } .layout-layer_button span#object-layer_yes { color: #40AFFE } .layout-layer_button span#object-layer_no { border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px } .layout-layer_button span:active { background-color: #F6F6F6 } @-webkit-keyframes layout-layer_animation_scale { 0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes layout-layer_animation_scale { 0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .layout-layer_animation_scale { animation-name: layout-layer_animation_scale; -webkit-animation-name: layout-layer_animation_scale; } @-webkit-keyframes layout-layer_animation_loading { 0%, 100%, 80% { transform: scale(0); -webkit-transform: scale(0) } 40% { transform: scale(1); -webkit-transform: scale(1) } } @keyframes layout-layer_animation_loading { 0%, 100%, 80% { transform: scale(0); -webkit-transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } } .layout-layer_animation_loading { background-color: transparent !important; box-shadow: none !important; }