Os efeitos são os seguintes:
Arquivo CSS Delcss.css
O código é o seguinte:
A cópia do código é a seguinte:
*{margem: 0;
#div1 {largura: 300px; - Índice: 2;
#div1 h3 {altura: 20px;
#overlay {largura: 100%;
#CloseConful Posição: Absoluto;
#trueConfirma {Lidra: 80px; Posição: Absoluto;
#confirmcon {text-align: Center;
arquivo js confirmpop.js
O código é o seguinte:
A cópia do código é a seguinte:
Função Confirmpop (Delobj, Confirmmain, Sobreposição, Binktitle, ClosConfirm, TrueConfirm) {
this.odelobj = document.getElementById (DELOBJ);
this.odiv = document.getElementById (confirmmain);
this.ooverlay = document.getElementById (sobreposição);
this.otitle = document.getElementById (binktitle);
this.ocloseConfirm = document.getElementById (ClosConfirm);
this.otrueConfirm = document.getElementById (TrueConfirm);
this.oConstart = 0;
this.oconitarget = 0;
this.init ();
}
Confirmpop.prototype = {
init: function () {
this.oConstart = parseInt ((document.documentElement.clientHeight-This.odiv.OffSethEight)/2-100);
this.oConitarget = parseint ((document.documentElement.clientHeight-his.odiv.offsetHeight)/2-70);
this.odiv.style.top = this.oConstart+'px';
document.title = this.oConstart+','+this.oconitarget;
var _This = this;
this.odelobj.onClick = function () {
_This.ConfirmShow ();
}
this.ooverlay.onClick = function () {
_This.titlebink ();
}
this.ocloseConfirm.onClick = this.otrueConfirm.onClick = function () {
_This.ConfirmHide ();
}
},
Confirmshow: function () {
this.ooverlay.style.display = 'bloco';
this.odiv.style.display = 'bloco';
strivemove (this.ooverlay, {opacity: 30});
strivemove (this.odiv, {top: this.oconitarget, opacidade: 100})
},
TitleBink: function () {
var _This = this;
var ilighttimer = null;
var i = 0;
ilighttimer = setInterval (function () {
if (i%2) {
_This.otitle.style.background = '#60f';
}outro{
_This.otitle.style.background = '#ccc';
}
i ++;
if (i> 5) {
ClearInterval (ilighttimer);
}
}, 50)
},
ConfirmHide: function () {
strivemove (this.ooverlay, {opacidade: 0});
this.ooverlay.style.display = 'nenhum';
strivemove (this.odiv, {top: this.oconstart, opacidade: 0});
}
}
função strivemove (obj, json, fn) {clearInterval (obj.itimer); obj.itimer = setInterval (function () {var bstop = true; para (var att em json) {var icur = 0; if (attr == 'Opacity') {icur = Math.round (parsefloat (getStyle (obj, att))*100);} else {icur = parseint (getStyle (obj, att));} var ispeed = (json [att] -icur )/8; isPEED = ISPEED> 0? Math.CEIL (ISPEED): Math.Floor (ISPEED); if (att == 'opacity') {obj.style.filter = 'alfa (opacidade:'+ (icur+ ispeed )+')'; obj.style.opacity = (icur+ispeed)/100;} else {obj.style [att] = icur+ispeed+'px';} if (icur! == json [att]) { bstop = false;}} if (bstop) {clearInterval (obj.itimer); if (fn) {fn ();}}}, 30)} função getStyle (obj, att) {return obj.currentStyle? ob j. CurrentStyle [att]: getComputedStyle (obj, false) [att];}
Como usar
1.Introduzir arquivos
A cópia do código é a seguinte:
<link rel = "stylesheet" type = "text/css" href = "delcss.css"/>
<script src = "Confirmpop.js"> </script>
2. Métodos de chamada
A cópia do código é a seguinte:
<Cript>
window.onload = window.onResize = function () {
novo confirmpop ('btn', 'div1', 'overlay', 'title', 'closeconfirm', 'trueconfirm');
}
</script>
3. Esteja preparado
A cópia do código é a seguinte:
<div id = "div1">
<h3 id = "title"> </h3>
<div id = "confirmCon">
Tem certeza de que deseja excluí -lo?
</div>
<a href = "###" id = "trueconfirm"> confirmar </a>
<a href = "###" id = "ClosConfirm"> Cancelar </a>
</div>
<div id = "sobreposição"> </div>
Este código fornece espaço e escreve seu próprio código div. Na tag A na caixa de determinação, você pode preencher o endereço excluído. Ao clicar em OK, você pulará para o método da página excluída.
Este código pode ser colocado em qualquer lugar. Não ocupa espaço. O autor é muito nítido.
4. Fusível, gatilho
A cópia do código é a seguinte:
<a id = "btn"> <img src = "/imagens/default/right/ico_del.gif"/> </a>
Adicione ID = "BTN" ao ícone Excluir, que acionará o efeito da exclusão.
Se você deseja modificar o estilo, pode ir ao CSS para modificar e ajustar.
Resumo: Essa deleção JS é mais bonita que a caixa pop-up que vem com o navegador. O autor usa apenas 3k JS para escrever esse efeito, o que é realmente incrível.
PS, acabei de trouxer.
Desvantagens: apenas um conteúdo pode ser excluído. Porque tudo é orientado a ID e é solteiro.