Although a general control is not absolutely universal, it can still be called freely in my project, you can also learn from other projects that are currently working on a game project. There are a lot of projects that require dialog boxes and images made by the artist, in this way, it seems that it is difficult to find some ready-made dialog box controls, so I tried to make a general control, although not absolutely universal, however, in my project, you can still call it at will. If you think about it, you can also learn from other projects.
First paste the main code:
The Code is as follows:
// Basic html content of the dialog box, absolute positioning, high width setting, background image, title, and two button charts
Var tdlz_dialog_content ="
";
// Text: title, type: Dialog Box type, funcOK: definite execution function, time: time displayed by Countdown or alert
Function showTdDialog (text, type, funcOK, time ){
Var dialogid = "# tdlz_dialog ";
$ (Dialogid). show (500 );
$ ("# Dialog_lb_text" ).html (text );
Switch (type ){
Case "show": // dialog box for displaying information, with a confirmation key. It disappears after you click it.
$ ("# Tdlz_dialog_cancel"). hide ();
$ ("# Tdlz_dialog_ OK"). unbind ();
$ ("# Tdlz_dialog_ OK"). click (function (){
$ (Dialogid). hide (500 );
$ ("# Tdlz_dialog_ OK" ).css ("margin-right", "0 ");
$ ("# Tdlz_dialog_cancel" cmd.css ("margin-left", "0 ");
});
Break;
Case "alert": // warning dialog box, which disappears after time
$ ("# Tdlz_dialog_cancel"). hide ();
$ ("# Tdlz_dialog_ OK"). unbind ();
SetTimeout (function (){
$ (Dialogid). hide (500 );
$ ("# Tdlz_dialog_ OK" ).css ("margin-right", "0 ");
$ ("# Tdlz_dialog_cancel" cmd.css ("margin-left", "0 ");
}, Time );
$ ("# Tdlz_dialog_ OK"). click (function (){
$ (Dialogid). hide (500 );
$ ("# Tdlz_dialog_ OK" ).css ("margin-right", "0 ");
$ ("# Tdlz_dialog_cancel" cmd.css ("margin-left", "0 ");
});
Break;
Case "confirm": // confirmation dialog box, with a confirmation cancel key. If yes, the function is executed; otherwise, the function is not executed and disappears.
$ ("# Tdlz_dialog_cancel"). show ();
$ ("# Tdlz_dialog_ OK" ).css ("margin-right", "5% ");
$ ("# Tdlz_dialog_cancel" cmd.css ("margin-left", "5% ");
$ ("# Tdlz_dialog_ OK"). unbind ();
$ ("# Tdlz_dialog_ OK"). click (function (){
FuncOK ();
SetTimeout (function (){
$ (Dialogid). Hides (500)
},1000 );
});
$ ("# Tdlz_dialog_cancel"). click (function (){
$ (Dialogid). hide (500 );
});
Break;
Case "time": // countdown dialog box. The time countdown is displayed and disappears after the countdown.
$ ("# Tdlz_dialog_cancel"). hide ();
$ ("# Dialog_lb_text" ).html (text + "" + time );
Var a = setInterval (function (){
Time = parseInt (time)-1;
If (time <0 ){
ClearInterval ();
$ (Dialogid). hide (500 );
}
$ ("# Dialog_lb_text" ).html (text + "" + time );
},1000 );
$ ("# Tdlz_dialog_ OK"). unbind ();
$ ("# Tdlz_dialog_ OK"). click (function (){
$ (Dialogid). hide (500 );
$ ("# Tdlz_dialog_ OK" ).css ("margin-right", "0 ");
$ ("# Tdlz_dialog_cancel" cmd.css ("margin-left", "0 ");
});
Break;
}
}
In addition to the above functions, you also need to initialize the dialog box, in order to insert the document and center the display
The Code is as follows:
Function initDialog (){
$ ("Body"). before (tdlz_dialog_content );
// Calculate the proper intermediate position
Var top_percent = (window. innerHeight/4)/window. innerHeight
Var left_percent = (window. innerWidth/2-$ ("# tdlz_dialog"). width ()/2)/window. innerWidth;
$ ("# Tdlz_dialog" ).css ("top", top_percent * 100 + "% ");
$ ("# Tdlz_dialog" ).css ("left", left_percent * 100 + "% ");
$ ("# Tdlz_dialog" ).css ("z-index", "100 ");
$ ("# Tdlz_dialog"). hide ();
}
The usage is as follows (the confirm dialog box is used as an example ):
The Code is as follows:
InitDialog ();
ShowTdDialog ("I'm a Dialog", "confirm", function (){
Console. log ("Button OK Clicked! ");
});
As follows:
