Custom alert OK, cancel function

To delete as an example, first create a new HTML

<TableBorder= "1"cellpadding= "0"cellspacing= "0"ID= "Mytab">        <thead>            <TR>                <th>Name</th>                <th>Age</th>                <th>Gender</th>                <th>Operation</th>            </TR>        </thead>        <tbody>            <TR>                <TD>King Two Dog</TD>                <TD>24</TD>                <TD>Man</TD>                <TD><ahref="#"class= "Delete">Delete</a></TD>            </TR>            <TR>                <TD>Wang Xiao</TD>                <TD>26</TD>                <TD>Woman</TD>                <TD><ahref="#"class= "Delete">Delete</a></TD>            </TR>        </tbody>    </Table>

Introduction of <script src= "Js/jquery.js" ></script>

Introduce <script src= "Js/mybase.js" ></SCRIPT>, here is the code for Mybase.js:

/** @Author: administrator* @Date: 2017-01-11 15:12:25* @Last Modified by:administrator* @Last Modified time:2017 -01-11 15:13:33*/' Use strict ';var$window =$ (window);var$body = $ (' body ');functionPop (ARG) {if(!Arg) {Console.error (' Pop title is required '); }    varconf ={}, $box, $mask, $title, $content, $confirm, $cancel, timer, DFD, confirmed; DFD= $.    Deferred (); if(typeofarg = = ' String ') Conf.title=Arg; Else{conf=$.extend (CONF,ARG); } $box= $ (' <div> ' + ' <div class= "pop_title" > ' + conf.title + ' </div> ' + ' <div C lass= "Pop_content" > ' + ' <div> ' + ' <button style= "margin-right:5px;" Class  = "Primary Confirm" > OK </button> ' + ' <button class= "Cancel" > Cancel </button></div> ' + ' </div> ' + ' </div> '). css ({color:' #333 ', Width:300, Height:200, background:' #fff ', Position:' Fixed ',      ' Box-radius ': 3,      ' Box-shadow ': ' 0 1px 2px rgba (0,0,0,.3) '}) $title= $box. Find ('. Pop_title ')). css ({padding:' 5px 10px ',      ' Font-weight ': 700,      ' Font-size ': 20,      ' Text-align ': ' Center '}) $content= $box. Find ('. Pop_content ')). css ({padding:' 5px 10px ',      ' Text-align ': ' Center '}) $confirm= $content. Find (' button.confirm '); $cancel= $content. Find (' Button.cancel '); $mask= $ (' <div></div> '). css ({position:' Fixed ', background:' Rgba (0,0,0,0.5) ', Top:0, bottom:0, left:0, right:0}) Timer= SetInterval (function(){      if(Confirmed!==undefined)        {dfd.resolve (confirmed);        Clearinterval (timer);      Dismiss_pop (); }    },50); $confirm. On (' Click ', on_confirm); //$cancel. On (' click ', Function () {    //confirmed = false;    // });$cancel. On (' Click ', On_cancel); $mask. On (' Click ', On_cancel); functionon_confirm () {confirmed=true;    }; functionOn_cancel () {confirmed=false;    }; functionDismiss_pop () {$mask. Remove ();    $box. Remove (); }    functionAdjust_box_posititon () {varWindow_width =$window. Width (), window_height=$window. Height (), Box_width=$box. Width (), Box_height=$box. Height (), move_x, move_y; Move_x= (window_width-box_width)/2; Move_y = ((window_height-box_height)/2)-30;$box. css ({left:move_x, top:move_y,}); }    //The Resize event function is to call Adjust_box_posititon () when zooming the window, so that the $box is centered    //but it is not required to open the window when the scaling, so to add a trigger $window.resize ()$window. On (' Resize ',function() {Adjust_box_posititon ();    });    $mask. AppendTo ($body);    $box. AppendTo ($body); //add a trigger to center the $box$window. Resize (); returndfd.promise ();}

Call method directly:

<script>var$task _delete_trigger = $ ('. Delete '));/*Find and listen for all Delete button click events*/functionListen_task_delete () {$task _delete_trigger.on (' Click ',function () {      var$ This= $( This); /*find the task element where the Delete button is located*/      var$item = $ This. Parent (). parent ();      /*Confirm Delete? */Pop (' OK delete? '). Then (function(r) {          if(r = =true{$item. Remove ()}Else{              return false          }; })})}listen_task_delete ();</script>

Custom alert OK, cancel function