Use Js/jquery to write a custom dialog box control _javascript tips

Recently in a game project, many of the projects need to use the dialog box, and have to use the pictures made of art, such words seem to be not good to find some ready-made dialog box control, and then think of their own to do a common control, although not absolutely universal, but in my project can be arbitrary call, Ideas can also be borrowed from other projects.

First paste the main code:

Copy Code code as follows:

The basic HTML content of the dialog box, absolute positioning, width settings, background picture, title, two button graphs
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= ' dialog_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: Caption, type: dialog box type, Funcok: Determined execution function, time: Countdown or alert display
function Showtddialog (text, type, Funcok, time) {
var dialogID = "#tdlz_dialog";
$ (dialogID). Show (500);
$ ("#dialog_lb_text"). html (text);
Switch (type) {
Case "Show"://Display Information dialog box, with a certain key, click to disappear
$ ("#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"). CSS ("Margin-left", "0");
});
Break
Case "alert"://Warning dialog box, disappear 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"). CSS ("Margin-left", "0");
}, time);
$ ("#tdlz_dialog_ok"). Click (function () {
$ (dialogID). Hide (500);
$ ("#tdlz_dialog_ok"). CSS ("margin-right", "0");
$ ("#tdlz_dialog_cancel"). CSS ("Margin-left", "0");
});
Break
Case "confirm"://confirmation dialog box, with confirm Cancel key, confirm then execute function, otherwise do not execute and disappear
$ ("#tdlz_dialog_cancel"). Show ();
$ ("#tdlz_dialog_ok"). CSS ("Margin-right", "5%");
$ ("#tdlz_dialog_cancel"). CSS ("Margin-left", "5%");
$ ("#tdlz_dialog_ok"). Unbind ();
$ ("#tdlz_dialog_ok"). Click (function () {
Funcok ();
settimeout (function () {
$ (dialogID). Hide (500)
}, 1000);

});
$ ("#tdlz_dialog_cancel"). Click (function () {
$ (dialogID). Hide (500);
});
Break
Case "Time"://Countdown dialog box, showing the timer countdown, disappear after the end
$ ("#tdlz_dialog_cancel"). Hide ();
$ ("#dialog_lb_text"). HTML (text + "" + Time);
var a = setinterval (function () {
Time = parseint (time)-1;
if (Time < 0) {
Clearinterval (a);
$ (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"). CSS ("Margin-left", "0");
});
Break
}
}

In addition to the use function above, you need to initialize the dialog box to insert the document and center the

Copy Code code as follows:

function InitDialog () {
$ ("body"). before (tdlz_dialog_content);
Calculate the appropriate middle 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 ();
}

Use the following (Take the Confirm dialog box for example):

Copy Code code as follows:

InitDialog ();
Showtddialog ("I ' m a Dialog", "Confirm", function () {

Console.log ("button OK clicked!");

});

The effect chart is as follows: