Make a frame to play, by the way familiar with the recent new learning plug-in encapsulation technology

First, there is no plan.

"Cause" because of the company from development to the present time are more tense, many times need to frame the place are directly with alert (), confirm (), prompt () These self-brought cue box, the biggest problem is that these three buddies with the browser of the different color, is a front-end chameleon, magical and helpless

So, this time and our handsome designers to summarize the three kinds of cue box, I also through the recent learning to the new hand packaging technology, into into, relative to the big God level of people, look on the line, by the way better

"At present, the problem of their own thinking" so far, their own work has been 2.5 years, early to realize the needs of the time, more is to cultivate their own great God level of thought, and code utilization problems, the road long its repair far, I will go up and down and quest

"Nonsense, come to code."

<script src= "Https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script>$(function(){    vardata = {        //type: "Prompt",        //type: "Confirm",Type: "Select", Text:"I am the message", inte:"200 points", desc:"Share the Completion method/experience, get more U-Coins",    }; varAlertbox =ALERTFN (data); $(' Body '). Append (Alertbox); Alertbox.fadein (); //use directly in a fixed positionAlertbox.find (' #alert_confirm '). On (' click ',function() {Console.log (' OK button execution position! ‘);    Alertbox.hide (); });});/** * [ALERTFN description] * @param {[type]} [required parameter, value is 3, 1.prompt No button of the prompt box; 2.confirm has a prompt box for the OK button; 3.select has a confirmation button and a Cancel button's prompt box] * @param {[text]} [required parameter, used to display prompt message] * @param {[inte]} [optional parameter, under prompt type, used to display the number of points earned] * @param {[desc]} [optional parameters, in prompt Type, to display the prompt message] * @return {[type]} [description]*/varALERTFN =function(o) {varo = O | | {}; varCentercon = ";//Center Content    varCENTERBTN = ";//Button Selection    varAlertall = ' '; if(o.type&&o.type== ' Prompt ') {Centercon= ' <div style= ' padding-bottom:12px; " > ' + ' <div style= "Font-size:20px;color: #474747;p adding-top:46px;" > Congratulations </div> ' + ' <div style= font-size:16px;color: #707070;p adding:12px 0; " > ' +o.text+ ' </div> ' + ' <div style= "Font-size:20px;color: #fda626;p adding-bottom:18px;" >+ ' +o.inte+ ' </div> ' + ' <div style= ' font-size:12px;color: #707070; " > ' +o.desc+ ' </div> ' + '  ' + ' </div> '; CENTERBTN= ' '; }Else if(o.type&&o.type== ' Confirm ') {Centercon= ' <div style= ' font-size:20px;color:474747;padding-top:54px; " > Warm tips </div> ' + ' <div style= "Font-size:16px;color: #474747;p adding:20px 0;" > ' +o.text+ ' </div> '; CENTERBTN= ' <div style= ' display:table;width:250px;table-layout:fixed;padding:7px 0;border-top:solid 1px #e4e4e4; " > ' + ' <div style= "display:table-cell;vertical-align:middle;text-align:center;font-size:18px;he Ight:30px;border-left:solid 1px #e4e4e4; color: #fda626; "id=" alert_confirm "> OK </div> ' + ' </di V> '; }Else if(o.type&&o.type== ' SELECT ') {Centercon= ' <div style= ' font-size:16px;color: #474747;p adding:50px 0 38px; " > ' +o.text+ ' </div> '; CENTERBTN= ' <div style= ' display:table;width:250px;table-layout:fixed;padding:7px 0;border-top:solid 1px #e4e4e4; " > ' + ' <div style= "display:table-cell;vertical-align:middle;text-align:center;font-size:18px;he Ight:30px;color: #b2b2b2; "id=" Alert_cancel "> Cancel </div> ' + ' <div style=" Display:table-cell; Vertical-align:middle;text-align:center;font-size:18px;height:30px;border-left:solid 1px #e4e4e4; color: #fda626; " Id= "alert_confirm" > OK </div> ' + ' </div> '; }Else{Centercon= ' <div style= ' font-size:16px;color: #f00;p adding:50px 0 38px; " > Please enter required parameters type! </div> '; CENTERBTN= ' ';    }; Alertall= $ (' <div style= "Display:none;overflow:hidden; > ' + ' <div style= "Position:fixed;left:0;top:0;right:0;bottom:0;background:rgba (0,0,0,.54); Z-index: 10000; "id=" ALERT_BG "></div> ' + ' <div style=" position:fixed;top:50%;left:50%;z-index:10001;- Webkit-transform:translate ( -50%,-50%);-moz-transform:translate ( -50%,-50%);-o-transform:translate ( -50%,-50%); Transform:translate ( -50%,-50%); " > ' + ' <div style= overflow:hidden;width:82px;height:82px;background: #fff; Border-radius:50%;mar gin:0 auto; " ></div> ' + ' <div style= overflow:hidden;background: #fff; border-radius:10px;margin-top:-3 6px; " > ' + ' <div style= "width:250px;text-align:center;"   > ' +centercon+ ' </div> ' +centerbtn+ ' </div> ' + ' </div> ' +             ' </div> ' ); Alertall.find (' #alert_bg, #alert_cancel, #alert_shut '). On (' click ',function() {alertall.hide (); return false;    }); returnAlertall;};</script>

"Understanding" parameter description in the Code comment section, written very clearly, here say "Alertbox.fadein ();" In a fixed position directly use, the box will generally be placed in the page trigger function, so the direct execution of the pop box, this according to their own needs to refer to it;

"Note" This small plug-in is based on jquery, if you like JS can also be changed

Make a frame to play, by the way familiar with the recent new learning plug-in encapsulation technology