代码如下：
function variableDbclick() {
//创建内容容器
var content_wrap = document.createElement("div");
content_wrap.id = "content_wrap";
var content_container = document.createElement("div");
var pTag = document.createElement("p");
var labelTag = document.createElement('label');
labelTag.style.display = "inline-block";
labelTag.style.width = "80px";
labelTag.style.textAlign = "left";
labelTag.innerText = "采集器";
var selectTag = document.createElement('select');
selectTag.style.marginLeft = "4x";
selectTag.style.width = "200px";
selectTag.style.height = "30px";
selectTag.id = "self_select11";
var values = new Array(1, 2, 3, 4, 5, 6, 7); //下拉列表对应的值
for (var i = 0; i < values.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", values[i]);
option.innerText = "tag" + i;
selectTag.appendChild(option);
}
selectTag.options[0].selected = true; //默认显示第一个
pTag.appendChild(labelTag);
pTag.appendChild(selectTag);
//当前变量
var divTv = document.createElement("div");
var labelTag2 = document.createElement('label');
labelTag2.style.display = "inline-block";
labelTag2.style.width = "80px";
labelTag2.style.textAlign = "left";
labelTag2.innerText = "当前变量";
var input5 = document.createElement("input");
input5.type = 'text';
input5.style.marginLeft = "4x";
input5.style.width = "200px";
input5.style.height = '20px';
input5.style.borderRadius = "3px";
input5.style.border = '1px solid #a9a9a9';
input5.style.backgroundColor = "";
input5.style.marginBottom = "20px";
// input5.style.height = "30px";
divTv.appendChild(labelTag2);
divTv.appendChild(input5);
//显示内容
var divCv = document.createElement("div");
var span5 = document.createElement("span");
span5.innerText = "显示内容";
span5.style.width = "80px";
var input6 = document.createElement("input");
input6.type = "radio";
input6.name = "havepay";
input6.checked = true;
input6.style.marginLeft = "20px";
input6.id = "inp_one";
var label5 = document.createElement("label");
label5.innerText = "变量值";
var input7 = document.createElement("input");
input7.type = "radio";
input7.name = "havepay";
input7.id = "inp_two";
var label6 = document.createElement("label");
label6.innerText = "动态文本";
divCv.appendChild(span5);
divCv.appendChild(input6);
divCv.appendChild(label5);
divCv.appendChild(input7);
divCv.appendChild(label6);
//动态显示下方内容：选项1
var divB = document.createElement("div");
divB.id = "content_one";
divB.style.marginTop = '20px';
var spa = document.createElement("span");
spa.innerText = "变量可控";
var input8 = document.createElement("input");
input8.type = "checkbox";
var spa2 = document.createElement("span");
spa2.innerText = "小数点位";
spa2.style.marginLeft = '10px';
var input9 = document.createElement("input");
input9.type = Number;
input9.style.width = '20%';
input9.disabled = 'disabled';
divB.appendChild(spa);
divB.appendChild(input8);
divB.appendChild(spa2);
divB.appendChild(input9);
//选项2(table)
var divC = document.createElement("div");
divC.id = "content_two";
divC.style.width = "280px";
divC.style.height = '180px';
divC.style.border = "1px solid #aeaeae";
divC.style.padding = "0";
divC.style.marginTop = "10px";
// divC.style.overflow = "auto";
var table1 = document.createElement("table");
table1.border = '1';
table1.cellspacing = "0";
table1.style.width = "100%";
var tbody1 = document.createElement("tbody");
var tr1 = document.createElement("tr");
var th1 = document.createElement("th");
th1.innerText = "最小值";
// th1.style.borderRight = "1px solid #aeaeae";
// th1.style.borderBottom = "1px solid #aeaeae";
th1.style.backgroundColor = "#f2f2f2";
var th2 = document.createElement("th");
th2.innerText = "最大值";
// th2.style.borderRight = "1px solid #aeaeae";
// th2.style.borderBottom = "1px solid #aeaeae";
th2.style.backgroundColor = "#f2f2f2";
var th3 = document.createElement("th");
th3.innerText = "动态文本";
// th3.style.borderRight = "1px solid #aeaeae";
// th3.style.borderBottom = "1px solid #aeaeae";
th3.style.backgroundColor = "#f2f2f2";
var th4 = document.createElement("th");
th4.style.width = "20px";
// th4.style.borderRight = "1px solid #aeaeae";
// th4.style.borderBottom = "1px solid #aeaeae";
th4.style.backgroundColor = "#f2f2f2";
tr1.appendChild(th1);
tr1.appendChild(th2);
tr1.appendChild(th3);
tr1.appendChild(th4);
tbody1.appendChild(tr1);
var tr2 = document.createElement("tr");
var td1 = document.createElement("td");
var td1_div = document.createElement("div");
td1_div.innerText = "0";
td1_div.style.textAlign = "center";
// td1_div.style.borderRight = "1px solid #aeaeae";
// td1_div.style.borderBottom = "1px solid #aeaeae";
td1_div.contentEditable = true;
var td2 = document.createElement("td");
var td2_div = document.createElement("div");
td2_div.innerText = "0";
td2_div.style.textAlign = "center";
// td2_div.style.borderRight = "1px solid #aeaeae";
// td2_div.style.borderBottom = "1px solid #aeaeae";
td2_div.contentEditable = true;
var td3 = document.createElement("td");
var td3_div = document.createElement("div");
td3_div.innerText = "0";
td3_div.style.textAlign = "center";
// td3_div.style.borderRight = "1px solid #aeaeae";
// td3_div.style.borderBottom = "1px solid #aeaeae";
td3_div.contentEditable = true;
var td4 = document.createElement("td");
td4.className = "closeBtn";
td4.innerText = "X";
td4.style.color = "red";
td4.style.textAlign = "center";
// td4.style.borderRight = "1px solid #aeaeae";
// td4.style.borderBottom = "1px solid #aeaeae";
td1.appendChild(td1_div);
td2.appendChild(td2_div);
td3.appendChild(td3_div);
tr2.appendChild(td1);
tr2.appendChild(td2);
tr2.appendChild(td3);
tr2.appendChild(td4);
table1.appendChild(tbody1);
table1.appendChild(tr2);
divC.appendChild(table1);
//创建确定取消按钮
var divBt = document.createElement("div");
divBt.style.textAlign = "right";
divBt.style.width = "280px";
divBt.style.marginTop = "15px";
divBt.style.height = "auto";
divBt.style.position = "absolute";
divBt.style.right = "20px";
divBt.style.bottom = "10px";
var cancelInp2 = document.createElement("input");
cancelInp2.type = "button";
cancelInp2.className = "cancel2 button_bt";
cancelInp2.value = mxResources.get("cancle"); //"取消"
cancelInp2.style.backgroundColor = "#f5f5f5";
cancelInp2.style.fontWeight = 'bold ';
cancelInp2.style.width = "80px";
cancelInp2.style.height = "30px";
cancelInp2.style.borderRadius = "2px";
cancelInp2.style.marginRight = "10px";
var confirmInp2 = document.createElement("input");
confirmInp2.type = "button";
confirmInp2.className = "confirm2 button_bt";
confirmInp2.value = mxResources.get("confirm"); //"确定"
confirmInp2.style.backgroundColor = "#4D90FE";
confirmInp2.style.color = "#FFFFFF";
confirmInp2.style.fontWeight = 'bold ';
confirmInp2.style.width = "80px";
confirmInp2.style.height = "30px";
confirmInp2.style.borderRadius = '2px';
divBt.className = "butContainer";
var botContainer = document.getElementsByClassName('butContainer')[0];
var cancle = document.getElementsByClassName("cancel2")[0];
var confirm = document.getElementsByClassName("confirm2")[0];
divBt.appendChild(cancelInp2);
divBt.appendChild(confirmInp2);
//添加叉号
var imgP = document.createElement("img");
imgP.src =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEV7mr3///+wksspAAAAAnRSTlP/AOW3MEoAAAAdSURBVAgdY9jXwCDDwNDRwHCwgeExmASygSL7GgB12QiqNHZZIwAAAABJRU5ErkJggg==";
imgP.title = "关闭";
imgP.className = "geDialogClose";
imgP.style.top = "20px";
imgP.style.left = "330px";
//将行元素添加进附近容器中
content_container.appendChild(pTag);
content_container.appendChild(divTv);
content_container.appendChild(divCv);
content_container.appendChild(divBt);
content_container.appendChild(imgP);
content_container.appendChild(divB);
content_container.appendChild(divC);
divC.style.display = "none";//默认表格不显示
content_container.style.width = "300px";
content_container.style.height = "350px";
content_container.style.position = "absolute";
content_container.style.left = "50%";
content_container.style.top = "50%";
content_container.style.transform = "translate(-50%, -50%)";
content_container.style.zIndex = 1600;
content_container.style.padding = "30px";
content_container.style.backgroundColor = "#fff";
content_container.style.border = "1px solid #acacac";
content_container.style.borderRadius = "5px";
content_container.style.boxShadow = "0 0 2px 2px #d5d5d5";
content_wrap.style.position = "absolute";
content_wrap.style.left = "0";
content_wrap.style.top = "0";
content_wrap.style.right = "0";
content_wrap.style.bottom = "0";
content_wrap.style.zIndex = 1500;
content_wrap.style.backgroundColor = "rgba(0,0,0,0.4)";
content_wrap.appendChild(content_container);
document.body.appendChild(content_wrap);
$(".geDialogClose").click(function() {
$("#content_wrap").remove(); //点击叉号清除弹框
})
//点击确定和取消事件
$(".confirm2").click(function(obj) {
if (obj.confirm) {
obj.confirm();
}
$("#content_wrap").remove(); //清除弹框
$(".confirm2").unbind();
})
$(".cancel2").click(function(obj) {
if (obj.confirm) {
obj.confirm();
}
$("#content_wrap").remove(); //清除弹框
$(".cancel2").unbind();
})
$("input[name=havepay]").click(function() {
showCont();
})
//根据选中的状态来选择执行不同的事件
function showCont() {
switch ($("input[name=havepay]:checked").attr("id")) {
case "inp_one":
$("#content_one").show();
$("#content_two").hide();
// content_container.appendChild(divB);
break;
case "inp_two":
$("#content_one").hide();
$("#content_two").show();
// content_container.appendChild(divC);
break;
default:
break;
}
}
}
当然，这里还有很多细节和点击事件没有处理，但是你遇到内容切换和表单的话还是可以改改能用的，纯手工封装的函数对话框源码，喜欢麻烦点个赞！
