Los efectos son los siguientes:
Archivo CSS delcss.css
El código es el siguiente:
La copia del código es la siguiente:
*{margen: 0;
#Div1 {ancho: 300px; - Índice: 2;
#Div1 H3 {altura: 20px;
#verlay {ancho: 100%;
#CloSeconFirm {ancho: 80px; Posición: Absoluto;
#TrueconFirm {Ancho: 80px; Posición: Absoluto;
#confirmCon {text-align: Center;
JS FILE CONFORMPOP.JS
El código es el siguiente:
La copia del código es la siguiente:
función ConfirmPop (Delobj, ConfirmMain, Overlay, Binktitle, CloseconFirm, TrueConFirm) {
this.odelobj = document.getElementById (delobj);
this.odiv = document.getElementById (confirmarMain);
this.ooverlay = document.getElementById (superposición);
this.otitle = document.getElementById (binktitle);
this.ocloseconfirm = document.getElementById (CloseconFirm);
this.otrueconfirm = document.getElementById (TrueConFirm);
this.OconStart = 0;
this.oconitarget = 0;
this.init ();
}
ConfirmarPop.prototype = {
init: function () {
this.oconstart = parseInt ((document.documentelement.clientheight-this.odiv.offsetheight)/2-100);
this.oconitarget = parseInt ((document.documentelement.clientheight-this.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 ();
}
},
confirmarShow: function () {
this.ooverlay.style.display = 'bloque';
this.odiv.style.display = 'bloque';
strivemove (this.ooverlay, {opacidad: 30});
Strivemove (this.odiv, {top: this.oconitarget, opacidad: 100})
},
TitleBink: function () {
var _This = this;
var ilighttimer = null;
var i = 0;
ilighttimer = setInterval (function () {
if (i%2) {
_this.otitle.style.background = '#60f';
}demás{
_this.otitle.style.background = '#ccc';
}
i ++;
if (i> 5) {
ClearInterval (ilighttimer);
}
}, 50)
},
confirmhide: function () {
Strivemove (this.ooverlay, {opacidad: 0});
this.ooverlay.style.display = 'None';
Strivemove (this.odiv, {top: this.oconStart, opacidad: 0});
}
}
function strivemove (obj, json, fn) {ClearInterval (obj.itimer); obj.itimer = setInterval (function () {var bstop = true; for (var att en json) {var icur = 0; if (attr == 'opacidad') {icur = math.round (parsefloat (getStyle (obj, attr))*100);} else {icur = parseInt (getStyle (obj, attr));} var ispeed = (json [attr] -icur )/8; ispeed = ispeed> 0? Math.ceil (ispeed): math.floor (ispeed); if (attr == 'opacidad') {obj.style.filter = 'alfa (opacidad:'+ (Icur+ ispeed )+')'; obj.style.opacity = (Icur+ispeed)/100;} else {obj.style [attr] = icur+ispeed+'px';} if (icur! == json [attr]) { bstop = false;}} if (bstop) {clearInterval (obj.itimer); if (fn) {fn ();}}}, 30)} function getStyle (obj, attr) {return obj.CurrentStyle? Ob J. CurrentStyle [attr]: getComputedStyle (obj, falso) [attr];}
Cómo usar
1. Introducir archivos
La copia del código es la siguiente:
<link rel = "stylesheet" type = "text/css" href = "delcss.css"/>
<script src = "confirmpop.js"> </script>
2. Métodos de llamadas
La copia del código es la siguiente:
<script>
window.onload = window.onresize = function () {
new ConfirmPop ('btn', 'div1', 'superpuesto', 'título', 'Closeconfirm', 'TrueConFirm');
}
</script>
3. Esté preparado
La copia del código es la siguiente:
<div id = "div1">
<h3 id = "title"> </h3>
<div id = "confirmar">
¿Estás seguro de que quieres eliminarlo?
</div>
<a href = "###" id = "TrueConFirm"> Confirmar </a>
<a href = "###" id = "CloseconFirm"> Cancelar </a>
</div>
<div id = "superpuesto"> </div>
Este código proporciona espacio y escribe su propio código DIV. En la etiqueta A en el cuadro de determinación, puede completar la dirección eliminada. Cuando haga clic en Aceptar, saltará al método de página eliminado.
Este código se puede colocar en cualquier lugar. No ocupa espacio. El autor es muy agudo.
4. Fusible, disparador
La copia del código es la siguiente:
<a id = "btn"> <img src = "/images/default/right/ico_del.gif"/> </a>
Agregar id = "BTN" al icono Eliminar, que activará el efecto de eliminación.
Si desea modificar el estilo, puede ir a CSS para modificar y ajustar.
Resumen: dicha eliminación de JS es más hermosa que la caja emergente que viene con el navegador. El autor usa solo 3k JS para escribir este efecto, lo cual es realmente sorprendente.
PD, lo acabo de traer.
Desventajas: solo se puede eliminar un contenido. Porque todo está orientado a ID y es soltero.