Die Effekte sind wie folgt:
CSS -Datei delcs.css
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
*{Margin: 0;
#Div1 {Breite: 300px; - Index: 2;
#Div1 H3 {Höhe: 20px;
#Overlay {Breite: 100%;
#CLOSECORBIM {Breite: 80px; Position: Absolut;
#TRUECONFIRM {Breite: 80px; Position: Absolut;
|
JS -Datei bestätigenpop.js
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
Funktion bestätigen Sie
this.odelobj = document.getElementById (Delobj);
this.odiv = document.getElementById (Bestätigung);
this.ooverlay = document.getElementById (Overlay);
this.otitle = document.getElementById (BinkTitle);
this.ocloseConfirm = document.getElementById (CloseConfirm);
this.oTrueconfirm = document.getElementById (Trueconfirm);
this.oconstart = 0;
this.oconitarget = 0;
this.init ();
}
Confordpop.prototype = {
init: function () {
this.oconstart = parseInt ((document.documentElement.clientHeight-this.odiv.offseteight)/2-100);
this.oconitarget = parseInt ((document.documentElement.clientHeight-this.odiv.offseteight)/2-70);
this.odiv.style.top = this.oconstart+'px';
document.title = this.oconStart+','+this.oconitarget;
var _this = this;
this.odelobj.onclick = function () {
_this.confirplshow ();
}
this.ooverlay.onclick = function () {
_this.titlebink ();
}
this.ocloseConfirm.onclick = this.oTrueconfirm.onclick = function () {
_this.confirmhide ();
}
},
bestätigenshow: function () {
this.ooverlay.style.display = 'block';
this.odiv.style.display = 'block';
STRIVEMOVE (this.ooverlay, {Opazität: 30});
STRIVEMOVE (this.odiv, {top: this.oconitarget, Deckkraft: 100})
},
Titelbink: function () {
var _this = this;
var ilighttimer = null;
var i = 0;
IlightTimer = setInterval (function () {
if (i%2) {
_this.otitle.style.background = '#60f';
}anders{
_this.otitle.style.background = '#ccc';
}
i ++;
if (i> 5) {
ClearInterval (IlightTimer);
}
}, 50)
},
bestätigen: function () {
STRIVEMOVE (this.ooverlay, {Opazität: 0});
this.ooverlay.style.display = 'none';
STRIVEMOVE (this.odiv, {top: this.oconStart, Opazität: 0});
}
}
Funktion Strivemove (obj, json, fn) {clearInterval (obj.itimer); obj.itimer = setInterval (function () {var bstop = true; für (var attr in json) {var icur = 0; if (attr == 'Opazität') {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 == 'opazität') {obj.style.filter = 'alpha (opazität:'+ (icur+ ispeed )+'); BStop = false;}} if (bStop) {ClearInterval (obj.itimer); if (fn) {fn ();}}}, 30)} Funktion getStyle (obj, attr) {return obj.currentStyle? ob j. CurrentStyle [Attr]: GetComputedStyle (OBJ, Falsch) [Attr];}
Wie man benutzt
1. Dateien einführen
Die Codekopie lautet wie folgt:
<link rel = "stylesheet" type = "text/css" href = "delcs.css"/>
<script src = "cräfEpop.js"> </script>
2. Rufmethoden
Die Codekopie lautet wie folgt:
<Script>
window.onload = window.onResize = function () {
New AdcalPop ('Btn', 'Div1', 'Overlay', 'Titel', 'Closeconfirm', 'Trueconfirm');
}
</script>
3. Seien Sie vorbereitet
Die Codekopie lautet wie folgt:
<div id = "div1">
<h3 id = "title"> </h3>
<div id = "bestätigencon">
Sind Sie sicher, dass Sie es löschen möchten?
</div>
<a href = "###" id = "trueconfirm"> bestätigen </a>
<a href = "###" id = "CloseConfirm"> abbrechen </a>
</div>
<div id = "obery"> </div>
Dieser Code bietet Platz und schreibt Ihren eigenen Div -Code. In der A -Tag im Bestimmungsfeld können Sie die gelöschte Adresse ausfüllen. Wenn Sie auf OK klicken, springen Sie zur gelöschten Seitenmethode.
Dieser Code kann überall platziert werden. Es nimmt keinen Platz ein. Der Autor ist sehr scharf.
4. Sicherung, Trigger
Die Codekopie lautet wie folgt:
<a id = "btn"> <img src = "/bilder/default/rechts/ico_del.gif"/> </a>
Fügen Sie ID = "Btn" zum Löschensymbol hinzu, das den Lösch -Effekt auslöst.
Wenn Sie den Stil ändern möchten, können Sie zu CSS gehen, um zu ändern und anzupassen.
Zusammenfassung: Eine solche JS-Löschung ist schöner als die Popup-Box, die mit dem Browser geliefert wird. Der Autor verwendet nur 3K JS, um diesen Effekt zu schreiben, was wirklich erstaunlich ist.
PS, ich habe es gerade mitgebracht.
Nachteile: Es können nur ein Inhalt gelöscht werden. Weil alles id-orientiert ist und Single ist.