A custom dialog box control written by myself using js/jquery

Recently, I am working on a game project. Many projects need to use dialog boxes and images made by artists. It seems that it is difficult to find some ready-made dialog box controls, as a result, I thought that I could make a general control. Although it was not absolutely universal, I could still call it at will in my project. If I thought about it, I could also learn from other projects.

First paste the main code:
Copy codeThe 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 = "<div id = 'tdlz _ dialog"
+ "'Style = 'position: absolute; text-align: center; width: 540px; height: 331px; background: url (assets/images/add_fbc.png ); '> <ul> <li id = 'alog alog _ lb_text' style = 'margin-top: 100px; color: # fff; font-size: 25px '>"
+ "</Li> <li style = 'margin-top: 100px; cursor: pointer '> </img> </img> </li> </ul> </div> ";
// 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
Copy codeThe 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 ):
Copy codeThe Code is as follows:
InitDialog ();
ShowTdDialog ("I'm a Dialog", "confirm", function (){

Console. log ("Button OK Clicked! ");

});

As follows: