Small plug-ins for confirm () methods in pseudo-JavaScript

10 days did not write a blog, do not know why, in the heart feel quite uncomfortable, may this is oneself to the stipulation to complete the thing, did not follow the plan to carry out, always in the heart not very comfortable. Recently, a lot of things, finally today to update the blog.

Today's writing is a small plug-in. Usually we are accustomed to use JavaScript in the Confirm () function to make a popup window effect, but the problem is that the window is very ugly, greatly reducing the overall effect of the page.

All right, nonsense. Say, first to understand the confirm () function, the following should be annotated very clearly.

if(Confirm ("let's go to Ali Mountain, shall we? ")){//like the alert () method, it pops up//number of content, the difference is that when clicked OK will return true, the cancellation will return FalseAlert"Oh, yes! So should we prepare something? ");//The statement executed when you click OK}Else{alert ("What fun is there in Tibet? It's better to go abroad and sneak away ...");//The statement executed when you click Cancel}

Here is a small plugin I wrote, first on the CSS

. show_info_contain {position:fixed; Top: -%; Left: -%; margin-left:-200px;margin-top:-100px;background-color: # the; border: #9E9E9E 1px solid;border-radius:3px;width:400px;height:200px;color: #fff;}. Show_info_tittle {height:40px;line-Height:40px;background-color: #333333; border-bottom:1px solid #FFF; text-Align:center;font-size:16px;}. show_info_content {Padding:20px;font-Size:16px;text-Align:center;margin-top:20px;}. TR {text-Align:right;}. btn_green1 {padding:8px 16px;border-Radius:2px;color: #333; text-Decoration:none;font-Size:16px;display:inline-Block;}. green{background-color: #90EB6A; Margin-right:75px;}. green:hover{background-Color:gray; Color: #fff;}. red{background-color: #EC6868; Margin-right:80px;}. red:hover{background-Color:gray; Color: #fff;}. show_info_confirm_cancel{margin-top:20px;}

Then it's JavaScript.

function Show_confirm (info,callback) {//two parameters: info for content to be displayed, callback as callback functionvarContent='<div class= "Show_info_contain" id= "Contain-info-show" >'+'<div class= "Show_info_tittle" >Prompt</div>'+'<div class= "Show_info_content" >'+info+'</div>'+'<div class= "show_info_confirm_cancel tr" id= "Show_info_confirm_cancel" ><a href= "javascript:void (0);" Id= "Confirm-info-show" class= "Btn_green1 Green" >confirm</a><a href= "javascript:void (0);" id= " Cancel-info-show "class=" Btn_green1 Red ">cancel</a></div>'+'</div>'; $('Body'). append (content); $('#show_info_confirm_cancel'). Click (function (e) {if(E.target==$ ("#confirm-info-show")[0]){           $('#contain-info-show'). Remove (); Callback.call ( This,true); }Else if(E.target==$ ("#cancel-info-show")[0]){     $('#contain-info-show'). Remove (); Callback.call ( This,false); }   });}

Invocation mode

Show_confirm ("Shall we go to Ali to the mountain, please?"  ifalert ("Well, what should we prepare for?").  "); }else{alert (" What fun is there in Tibet!") Whynot go abroad and sneak ... ");});

Show