jQuery常用工具之message和toast弹窗插件代码分享

js代码

/*!
* Message.js v3.2.2
*
*/!function(n){var t={};function e(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}
e.m=n,e.c=t,e.d=function(n,t,r){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:r})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(r,o,function(t){return n[t]}.bind(null,o));return r},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=1)}([function(n,t){n.exports='<div class="ui__alert_bg in"></div>\n<div class="ui__alert_content in">\n    <div class="ui__content_body"></div>\n    <div class="ui__content_foot"></div>\n</div>'},function(n,t,e){"use strict";e.r(t);e(2);var r=e(0),o=e.n(r);document.createElement("div").innerHTML=o.a,function(n,t){n.alert=i("alert"),n.confirm=i("confirm"),n.dialog=i("alert");var e=9999,r=t.createElement("style");function i(n){return function(r){"string"==typeof r&&(r={content:r}),!1===r.title&&r.title,r.type=n;var i=t.createElement("div");i.className="ui__alert",i.style.zIndex=e++,i.innerHTML=o.a;var s=`<h4 class="ui__title">${r.title||"友情提示"}</h4>`;s+=`<div>${r.content}</div>`;var c=`<a class="btn_done">${r.doneText||"确认"}</a>`;return "confirm"===r.type&&(c+=`<a class="btn_cancel">${r.cancelText||"取消"}</a>`),i.querySelector(".ui__content_body").innerHTML=s,i.querySelector(".ui__content_foot").innerHTML=c,t.body.appendChild(i),new Promise((n,t)=>{i.querySelector(".btn_done").onclick=function(){a(i),n()},"confirm"===r.type&&(i.querySelector(".btn_cancel").onclick=function(){a(i),t()})})}}
function a(n){var e=n.children[0];e.addEventListener("animationend",()=>{t.body.removeChild(n)}),e.addEventListener("webkitAnimationEnd",()=>{t.body.removeChild(n)}),n.children[0].className="ui__alert_bg out",n.children[1].className="ui__alert_content out"}
r.innerHTML=".",t.head.appendChild(r),n.toast=function(n){"string"==typeof n&&(n={content:n});var e=t.createElement("div");e.id='toastId';e.classList.add('toast_bg','in');switch(n.type){case 'success':e.innerHTML=`<i class="iconfont icon-success"></i><div class="toast_text">${n.content}</div>`;break;case 'error':e.innerHTML=`<i class="iconfont icon-error"></i><div class="toast_text">${n.content}</div>`;break;case 'loading':e.innerHTML=`<i class="iconfont icon-loading"></i><div class="toast_text">${n.content}</div>`;break;default:e.innerHTML=`<div class="toast_text">${n.content}</div>`;break;}
var toastId=document.getElementById('toastId');if(toastId==null){toastId=document.getElementById('toastId');t.body.appendChild(e);var r=setTimeout(()=>{clearTimeout(r),t.body.removeChild(e)},n.time||2e3)}}}(window,document)},function(n,t,e){var r=e(3);"string"==typeof r&&(r=[[n.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(r,o);r.locals&&(n.exports=r.locals)},function(n,t,e){(n.exports=e(4)(!1)).push([n.i,"* {\n  padding: 0;\n  margin: 0;\n}\n.ui__alert .ui__alert_bg {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  position: fixed;\n  background: rgba(0, 0, 0, 0.5);\n  -webkit-animation-duration: 500ms;\n   animation-duration: 500ms;\n}\n.ui__alert .ui__alert_bg.in {\n  -webkit-animation-name: bgFadeIn;\n          animation-name: bgFadeIn;\n}\n.ui__alert .ui__alert_bg.out {\n  -webkit-animation-name: bgFadeOut;\n          animation-name: bgFadeOut;\n}\n.ui__alert .ui__alert_content {\n  text-align: center;\n  position: fixed;\n  min-width: 250px;\n  max-width: 280px;\n  z-index: 9999;\n  background: #fff;\n  border-radius: 10px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-animation-duration: 500ms;\n          animation-duration: 500ms;\n}\n.ui__alert .ui__alert_content.in {\n  -webkit-animation-name: contentZoomIn;\n          animation-name: contentZoomIn;\n}\n.ui__alert .ui__alert_content.out {\n  -webkit-animation-name: contentZoomOut;\n          animation-name: contentZoomOut;\n}\n.ui__alert .ui__alert_content .ui__content_body {\n  font-size: 14px;\n  padding: 18px;\n  border-bottom: 1px solid #eee;\n}\n.ui__alert .ui__alert_content .ui__content_body .ui__title {\n  margin-bottom: 5px;\n  font-size: 16px;\n}\n.ui__alert .ui__alert_content .ui__content_foot {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ui__alert .ui__alert_content .ui__content_foot a {\n  font-size: 14px;\n  color: #017aff;\n  display: block;\n  text-decoration: none;\n  flex: 1;\n  text-align: center;\n  line-height: 40px;\n  border-left: 1px solid #eee;\n}\n.ui__alert .ui__alert_content .ui__content_foot a:first-child {\n  border-left: none;\n}\n.toast_bg {top: 50%;left: 50%;position: fixed;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border-radius: 5px;background: rgba(0, 0, 0, 0.7);color: white;-webkit-box-sizing: border-box;box-sizing: border-box;text-align: center;padding: 10px;z-index: 13;-webkit-animation-duration: 500ms;animation-duration: 500ms;}  .toast_bg.in {-webkit-animation-name: bgFadeIn;animation-name: bgFadeIn;}\n .toast_bg .iconfont{font-size:30px !important; color: rgba(255,255,255,0.8);margin-bottom: 10px;display: block;}  .toast_bg .iconfont.icon-loading:before{display: block;-webkit-transform:rotate(360deg);animation:rotation 2.7s linear infinite;} .toast_text {text-align: center;max-width: 300px;color: #fff;font-size: 14px;} @-webkit-keyframes rotation{ from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} } \n@-webkit-keyframes bgFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes bgFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes bgFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes bgFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@-webkit-keyframes contentZoomIn {\n  0% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n}\n@keyframes contentZoomIn {\n  0% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n}\n@-webkit-keyframes contentZoomOut {\n  0% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n}\n@keyframes contentZoomOut {\n  0% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n}\n ",""])},function(n,t,e){"use strict";n.exports=function(n){var t=[];return t.toString=function(){return this.map(function(t){var e=function(n,t){var e=n[1]||"",r=n[3];if(!r)return e;if(t&&"function"==typeof btoa){var o=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),i=r.sources.map(function(n){return "/*# sourceURL="+r.sourceRoot+n+" */"});return[e].concat(i).concat([o]).join("\n")}
var a;return[e].join("\n")}(t,n);return t[2]?"@media "+t[2]+"{"+e+"}":e}).join("")},t.i=function(n,e){"string"==typeof n&&(n=[[null,n,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];null!=i&&(r[i]=!0)}
for(o=0;o<n.length;o++){var a=n[o];null!=a[0]&&r[a[0]]||(e&&!a[2]?a[2]=e:e&&(a[2]="("+a[2]+") and ("+e+")"),t.push(a))}},t}},function(n,t,e){var r,o,i={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),s=function(n){var t={};return function(n,e){if("function"==typeof n)return n();if(void 0===t[n]){var r=function(n,t){return t?t.querySelector(n):document.querySelector(n)}.call(this,n,e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(n){r=null}
t[n]=r}
return t[n]}}(),c=null,l=0,u=[],f=e(6);function d(n,t){for(var e=0;e<n.length;e++){var r=n[e],o=i[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(y(r.parts[a],t))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(y(r.parts[a],t));i[r.id]={id:r.id,refs:1,parts:s}}}}
function p(n,t){for(var e=[],r={},o=0;o<n.length;o++){var i=n[o],a=t.base?i[0]+t.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):e.push(r[a]={id:a,parts:[s]})}
return e}
function m(n,t){var e=s(n.insertInto);if(!e)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=u[u.length-1];if("top"===n.insertAt)r?r.nextSibling?e.insertBefore(t,r.nextSibling):e.appendChild(t):e.insertBefore(t,e.firstChild),u.push(t);else if("bottom"===n.insertAt)e.appendChild(t);else{if("object"!=typeof n.insertAt||!n.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://huajiakeji.com/res/webpack-contrib/style-loader#insertat)\n");var o=s(n.insertAt.before,e);e.insertBefore(t,o)}}
function _(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n);var t=u.indexOf(n);t>=0&&u.splice(t,1)}
function b(n){var t=document.createElement("style");if(void 0===n.attrs.type&&(n.attrs.type="text/css"),void 0===n.attrs.nonce){var r=function(){0;return e.nc}();r&&(n.attrs.nonce=r)}
return v(t,n.attrs),m(n,t),t}
function v(n,t){Object.keys(t).forEach(function(e){n.setAttribute(e,t[e])})}
function y(n,t){var e,r,o,i;if(t.transform&&n.css){if(!(i="function"==typeof t.transform?t.transform(n.css):t.transform.default(n.css)))return function(){};n.css=i}
if(t.singleton){var a=l++;e=c||(c=b(t)),r=x.bind(null,e,a,!1),o=x.bind(null,e,a,!0)}else n.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=function(n){var t=document.createElement("link");return void 0===n.attrs.type&&(n.attrs.type="text/css"),n.attrs.rel="stylesheet",v(t,n.attrs),m(n,t),t}(t),r=function(n,t,e){var r=e.css,o=e.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([r],{type:"text/css"}),s=n.href;n.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,e,t),o=function(){_(e),e.href&&URL.revokeObjectURL(e.href)}):(e=b(t),r=function(n,t){var e=t.css,r=t.media;r&&n.setAttribute("media",r);if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}.bind(null,e),o=function(){_(e)});return r(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap)return;r(n=t)}else o()}}
n.exports=function(n,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var e=p(n,t);return d(e,t),function(n){for(var r=[],o=0;o<e.length;o++){var a=e[o];(s=i[a.id]).refs--,r.push(s)}
n&&d(p(n,t),t);for(o=0;o<r.length;o++){var s;if(0===(s=r[o]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete i[s.id]}}}};var h,g=(h=[],function(n,t){return h[n]=t,h.filter(Boolean).join("\n")});function x(n,t,e,r){var o=e?"":r.css;if(n.styleSheet)n.styleSheet.cssText=g(t,o);else{var i=document.createTextNode(o),a=n.childNodes;a[t]&&n.removeChild(a[t]),a.length?n.insertBefore(i,a[t]):n.appendChild(i)}}},function(n,t){n.exports=function(n){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!n||"string"!=typeof n)return n;var e=t.protocol+"//"+t.host,r=e+t.pathname.replace(/\/[^\/]*$/,"/");return n.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(n,t){var o,i=t.trim().replace(/^"(.*)"$/,function(n,t){return t}).replace(/^'(.*)'$/,function(n,t){return t});return /^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?n:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?e+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}}]);

html页面代码

<html lang="en">    
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title>    
<link rel="stylesheet" href="font/iconfont.css">    
<script src="./message.js"></script>    
<style>    
		body{padding: 20px}    
button {padding: 5px 10px;font-size: 16px; background: #ffc107; color: #fff;border: none}    
</style>    
</head>    
<body>    
<h2>alert方法</h2>    
<button id="alert">点击查看</button>    
<div style="padding:20px;background: #efefef">    
默认调用:alert('请打开麦克风')    
</div>    
<br>    
<button id="alert2">点击查看</button>    
<div style="padding:20px;background: #efefef">    
回调函数:alert('请打开麦克风').then(callback)    
</div>    
<br>    
<button id="alert3">点击查看</button>    
<div style="padding:20px;background: #efefef">    
支持多参数:alert({    
title: '我是标题',    
content: '请打开麦克风',    
doneText: '按钮文字'    
}).then(callback)    
</div>    
<script>    
document.getElementById('alert').onclick = function () {    
alert('请打开麦克风')    
}    
document.getElementById('alert2').onclick = function () {    
alert('请打开麦克风').then(() => {    
console.log('已确认')    
})    
}    
document.getElementById('alert3').onclick = function () {    
alert({    
title: '我是标题',    
content: '请打开麦克风',    
doneText: '按钮文字'    
})    
}    
</script>    
<br>    
<br>    
<h2>confirm方法</h2>    
<button id="confirm">点击查看</button>    
<div style="padding:20px;background: #efefef">    
默认调用:confirm('请打开麦克风')    
</div>    
<br>    
<button id="confirm1">点击查看</button>    
<div style="padding:20px;background: #efefef">    
confirm({    
title: '我是标题',    
content: '请打开麦克风',    
doneText: '确认按钮文字',    
cancalText: '取消按钮文字'    
}).then(() => {    
console.log('已确认')    
}).catch(() => {    
console.log('已取消')    
})    
</div>    
<br>    
<button id="confirm2">点击查看</button>    
<div style="padding:20px;background: #efefef">    
confirm({    
title: '我是标题',    
content: '请打开麦克风',    
doneText: '确认按钮文字',    
cancalText: '取消按钮文字'    
}).then(() => {    
console.log('已确认')    
}).catch(() => {    
console.log('已取消')    
})    
</div>    
<script>    
document.getElementById('confirm').onclick = function () {    
confirm('请打开麦克风').then(() => {    
console.log('已确认')    
}).catch(() => {    
console.log('已取消')    
})    
}    
document.getElementById('confirm2').onclick = function () {    
confirm({    
title: '我是标题',    
content: '请打开麦克风',    
doneText: '确认按钮文字',    
cancelText: '取消按钮文字'    
}).then(() => {    
console.log('已确认')    
}).catch(() => {    
console.log('已取消')    
})    
}    
</script>    
<br>    
<br>    
<h2>toast方法</h2>    
<button id="toast">点击查看</button>    
<div style="padding:20px;background: #efefef">    
默认调用:toast('请打开麦克风')    
</div>    
<br>    
<button id="toast1">点击查看</button>    
<div style="padding:20px;background: #efefef">    
设置停留时间:toast({time: 5000, content: '停留5秒再消失'})    
</div>    
<br>    
<button id="toast2">点击查看</button>    
<div style="padding:20px;background: #efefef">    
设置停留时间和icon图标:toast({time: 3000, content: '停留3秒再消失',type:'loading'})    
</div>    
<script>    
document.getElementById('toast').onclick = function () {    
toast('请打开麦克风')    
}    
document.getElementById('toast1').onclick = function () {    
toast({time: 5000, content: '停留5秒再消失'})    
}    
document.getElementById('toast2').onclick = function () {    
toast({time: 3e3, content: '停留3秒再消失',type:'loading'})    
}    
</script>    
</body>    
</html>


下一篇: 这就是最后一篇

© 2016-2024 阿尔佛 aerfo.com | 豫ICP备17044542号 | 豫公网安备 41010602000172