Simple Mobile Tips Plug-in

Javascript

function Feernotice (opt) {var opt = opt | | {} this.opt = {Text:opt.text | | "Loading in ...", duration:opt.duration | | Type:opt.type | |  ' Loading '};    Generates the specified DOM this.createdom = function () {var loadingdom = document.createelement (' div ');    loadingdom.id = ' feerloading ';    Loadingdom.classname = ' feerloading hide ';    var backdrop = document.createelement (' div ');    Backdrop.classname = ' backdrop ';        Switch (this.opt.type) {case ' loading ': var Loadingicon = document.createelement (' i ');      Loadingicon.classname = "Feer-loading-icon";      Break        Case ' success ': var Loadingicon = document.createelement (' i ');      Loadingicon.classname = "Feer-success-icon";      Break        Case ' failed ': var Loadingicon = document.createelement (' i ');      Loadingicon.classname = "Feer-failed-icon";        Break    Default:var Loadingicon = document.createelement (' i ');    } var txt = document.createTextNode (this.opt.text); BackdrOp.appendchild (Loadingicon);    Backdrop.appendchild (TXT);    Loadingdom.appendchild (backdrop);  return loadingdom; }//Displays if (typeof this.show! = ' function ') {FEerNotice.prototype.show = function () {if (!document.getelementbyid ('        Feerloading ') {var dom = This.createdom ();        document.getElementsByTagName (' body ') [0].appendchild (DOM);      document.getElementById ("Feerloading"). ClassName = ' feerloading ';      }else{document.getElementById ("feerloading"). ClassName = ' feerloading '; }}}//Hide if (typeof this.hide! = ' function ') {FEerNotice.prototype.hide = function () {if (!!      document.getElementById (' feerloading ')) {document.getElementById ("feerloading"). ClassName = ' feerloading hide '; }}}//Timed Show hidden if (typeof this.autohide! = ' function ') {FEerNotice.prototype.autoHide = function () {if (!do        Cument.getelementbyid (' feerloading ')) {var dom = This.createdom (); document.getElementsByTagName (' body ') [0].APPENDCHILD (DOM);      document.getElementById ("Feerloading"). ClassName = ' feerloading ';      }else{document.getElementById ("feerloading"). ClassName = ' feerloading ';      } setTimeout (function () {document.getElementById ("feerloading"). ClassName = ' feerloading hide '; }.bind (this), This.opt.duration)}}}

CSS

#FEerloading {position:fixed;    top:0;    left:0;    bottom:0;    right:0;    Margin:auto;    Display:flex;    Align-items:center;    Justify-content:center;    Background:rgba (0,0,0,0.7); z-index:9999;}    #FEerloading. backdrop{min-width:100px;    min-height:100px;    Text-align:center;    border-radius:4px;    Color:rgba (255,255,255,.8); Background:rgba (0,0,0,.8);}    #FEerloading. Backdrop i{position:relative;    Display:block;    margin:10px Auto 10px;    height:50px;    width:50px; Overflow:hidden;}    #FEerloading. Backdrop i.feer-loading-icon{background: #d7ad6a; border-radius:50%;}    #FEerloading. Backdrop i.feer-loading-icon:before{content: "";    Position:absolute;    Top: -98px;    left:50%;    Margin-left: -60px;    width:120px;    height:120px;    Background:rgba (0,0,0,.5);    border-radius:50px; -webkit-animation:roll-before 7s linear Infinite;}    @-webkit-keyframes roll-before{from {transform:rotate (0deg);} to {traNsform:rotate (360DEG);}}    #FEerloading. Backdrop i.feer-loading-icon:after{content: "";    Position:absolute;    Top: -97px;    left:50%;    Margin-left: -60px;    width:120px;    height:120px;    Background:rgba (0,0,0,.5);    border-radius:45px; -webkit-animation:roll-after 5s linear Infinite;}    @-webkit-keyframes roll-after{from {transform:rotate (0deg);} to {transform:rotate (360deg);}}    #FEerloading. Backdrop i.feer-success-icon:before{content: "";    Position:absolute;    left:16px;    top:10px;    width:20px;    height:35px;    BORDER:3PX solid #fff;    border-top:0;    border-left:0; Transform:rotate (45deg);}    #FEerloading. Backdrop i.feer-failed-icon:before{content: "";    Position:absolute;    left:24px;    top:10px;    width:3px;    height:35px;    Transform:rotate (45DEG); Background: #fff;}    #FEerloading. Backdrop i.feer-failed-icon:after{content: "";    Position:absolute;    left:24px;    top:10px;    width:3px; Height:35px    Transform:rotate ( -45DEG); Background: #fff;}

Description of the invocation method:

Introduction of the entry:
Opt: {    Text:opt.text | | "Loading in ...",    duration:opt.duration | | |,    type:opt.type | | ' Loading '}
Parameter fields for the OPT object:
text, you need to display the word of the hint;
Duration, automatically show/hide the prompt interval;
Type, hint types ' loading ' | ' Success ' | ' failed ' Each type corresponds to the style of a hint

Prototype method:

Show (), which displays the prompt;

Show (), hide hint;

AutoHide (), automatically show hidden hints;

Invocation Examples:

var fnotice = new Feernotice ({
Text: "Loading in ...",
duration:2000,
Type: "Loading"
})
Fnotice.autohide ()

　　

Simple Mobile Tips Plug-in