A custom dialog box control written by myself using js/jquery_javascript skills

Recently I was working on a game project. Many dialog boxes were needed in the project, and pictures made by artists were required. In this case, it seemed difficult to find some ready-made dialog controls, so I thought about making a universal one myself. Although the control is not absolutely universal, it can still be used at will in my project, and the ideas can also be used in other projects.

Post the main code first:

Copy the code The code is as follows:

//Basic html content of the dialog box, absolute positioning, height and width settings, background image, title, two button images
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 id=' tdlz_dialog_ok' src='assets/images/queren.png'></img><img id='tdlz_dialog_cancel' src='assets/images/quxiao.png'></img></li> ;</ul></div>";
//text: title, type: dialog box type, funcOK: determined execution function, time: countdown or alert display time
function showTdDialog(text , type, funcOK, time) {
var dialogid = "#tdlz_dialog";
$(dialogid).show(500);
$("#dialog_lb_text").html(text);
switch (type) {
case "show"://A dialog box that displays information, with an OK button, and disappears after clicking
$("#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, 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").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"://confirm dialog box with a confirm and cancel button. If confirmed, the function will be executed, otherwise it will not be executed 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, displays the time countdown and disappears after it ends
$("#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 using the functions above, you also need to The box is initialized to be inserted into the document and displayed in the center

Copy the code The code is 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();
}

is used as follows (taking the confirm dialog box as an example):

Copy code The code is as follows:

initDialog();
showTdDialog("I'm a Dialog","confirm ",function(){

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

});

The rendering is as follows: