Caixa de entrada da camada pop-up JavaScript (código de exemplo)

Conforme mostrado abaixo:

Copie o código do código da seguinte forma:

<linguagem script="javascript" type="text/javascript">

function alertWin(título, mensagem, w, h) {

var titleheight = "22px"; // altura do título da janela

var bordercolor = "#666699"; //Cor da borda da janela

var titlecolor = "#FFFFFF" // A cor do título da janela

var titlebgcolor = "#666699"; // Cor de fundo do título da janela

var bgcolor = "#FFFFFF"; //Cor de fundo do conteúdo

var iWidth = document.documentElement.clientWidth; //A largura desta janela;

var iHeight = document.documentElement.clientHeight; //Altura desta janela

//O formato da camada de fundo

var bgObj = document.createElement("div");

bgObj.style.cssText = "posição:absoluto;esquerda:0px;topo:0px;largura:" + iWidth + "px;altura:" + Math.max(document.body.clientHeight, iHeight) + "px;filtro:Alfa(Opacidade=30);opacidade:0,3;cor de fundo:#000000;índice z:1000;";

document.body.appendChild(bgObj);

var iframe2 = document.createElement("iframe");

iframe2.style.cssText = "posição:absoluto; topo:0px;filtro:Alfa(Opacidade=30);opacidade:0,3;cor de fundo:#000000; índice z:1001; estilo de borda:nenhum; largura da borda :0px; borda:0px;largura:" + iLargura + "px;altura:" + iAltura + "px";

bgObj.appendChild(iframe2);

//Cria uma camada pop-up

var msgObj = document.createElement("div");

//Define o estilo da camada pop-up

msgObj.style.cssText = "posição:absoluto;fonte:11px '宋体';top:" + (iHeight - h) / 2 + "px;esquerda:" + (iWidth - w) / 2 + "px;largura: " + w + "px;altura:" + h + "px;alinhamento de texto:centro;borda:1px sólido " + cor da borda + ";cor de fundo:" + bgcolor + ";preenchimento:1px;altura da linha:22px;índice z:1001;";

document.body.appendChild(msgObj);

//Cria uma tabela para acomodar o conteúdo da camada

var tabela = document.createElement("tabela");

//Coloca a tabela na camada pop-up

msgObj.appendChild(tabela);

//Define o formato da tabela

table.style.cssText = "margem:0px;borda:0px;padding:0px;";

tabela.cellSpacing = 0;

//Insere uma linha para exibir o título

var tr = tabela.insertRow(-1);

//Insere uma célula para conter o título

var titleBar = tr.insertCell(-1);

titleBar.style.cssText = "largura:100%;altura:" + titleheight + "px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';cor:" + titlecolor + " ;border:1px sólido " + bordercolor + ";cursor:mover;cor de fundo:" + titlebgcolor;

titleBar.style.paddingLeft = "10px";

//Definir título

titleBar.innerHTML = título;

//Definir evento de arrastar do Zander

var moverX = 0;

var movimentoY = 0;

var moveTop = 0;

var moveLeft = 0;

var móvel = falso;

var docMouseMoveEvent = document.onmousemove;

var docMouseUpEvent = document.onmouseup;

//Clique no título com o mouse

titleBar.onmousedown = function() {

var evt = getEvent();

móvel = verdadeiro;

moverX = evt.clientX;

moverY = evt.clientY;

moveTop = parseInt(msgObj.style.top);

moveLeft = parseInt(msgObj.style.left);

//arrastar o mouse

document.onmousemove=função(){

if (móvel) {

var evt = getEvent();

var x = moveLeft + evt.clientX - moveX;

var y = moveTop + evt.clientY - moveY;

if (x > 0 && (x + w <iLargura) && y > 0 && (y + h <iAltura)) {

msgObj.style.left = x + "px";

msgObj.style.top = y + "px";

}

}

};

document.onmouseup=função(){

if (móvel) {

document.onmousemove = docMouseMoveEvent;

document.onmouseup = docMouseUpEvent;

móvel = falso;

moverX = 0;

moverY = 0;

moverTop = 0;

mover para a esquerda = 0;

}

};

}

//Evento do botão Fechar

var closeBtn = tr.insertCell(-1);

closeBtn.style.cssText = "cursor:ponteiro; text-align:right;preenchimento:2px;cor de fundo:" + titlebgcolor;

closeBtn.innerHTML = "<span style='font-size:15pt;color:" + titlecolor + ";'>×</span>";

closeBtn.onclick = function() {

document.body.removeChild(bgObj);

document.body.removeChild(msgObj);

}

//O conteúdo da janela de mensagem pop-up

var msgBox = tabela.insertRow(-1).insertCell(-1);

msgBox.style.cssText = "fonte:10pt '宋体';";

msgBox.colSpan = 2;

msgBox.innerHTML = mensagem;

//O conteúdo do nome do modelo na camada

var nomeBox = tabela.insertRow(-1);

var nameLable = nameBox.insertCell(-1);

nameLable.style.cssText = "font:12pt '宋体';text-align:center;";

nameLable.innerHTML = "<br/>Digite o número de ID:<br/>";

var nometexto = nomeBox.insertCell(-1);

nametext.style.cssText = "font:12pt '宋体';text-align:Left; margin-left:0px";

nametext.innerHTML = "<br/><input type='text' value='' id='modalName'/> <br/>";

//O conteúdo do botão de ação na camada

var submitBox = table.insertRow(-1);

var submitBtn = submitBox.insertCell(-1);

submitBtn.style.cssText = "text-align:center;";

submeterBtn.colSpan = 2;

submitBtn.innerHTML = "<br/><input type='Button' value='OK' id='saveHeader'onclick='return GetCark()' /><br/>";

função getEvento() {

retornar janela.event || argumentos.callee.caller.arguments[0];

}

}

</script>

<input type="button" value="Cabeçalho de armazenamento" onclick="alertWin('Coleta de informações de identidade','',300,150);"