Эффекты следующие:
CSS -файл delcss.css
Код заключается в следующем:
Кода -копия выглядит следующим образом:
*{Margin: 0;
#Div1 {300px; - Индекс: 2;
#div1 H3 {высота: 20px;
#Overtlay {ширина: 100%;
#CloseConfirm {ширина: 80px; положение: абсолютно;
#trueconfirm {ширина: 80px; положение: абсолютно;
#confirmcon {text-align: center;
JS File reformpop.js
Код заключается в следующем:
Кода -копия выглядит следующим образом:
Функция Подтверждениепоп (Delobj, Conformmain, Overlay, Binktitle, CloseConfirm, TrueConfirm) {
this.odelobj = document.getElementbyId (delobj);
this.odiv = document.getElementbyId (sefintmain);
this.Ooverlay = document.getElementById (наложение);
this.otitle = document.getElementbyId (binktitle);
this.ocloseconfirm = document.getElementById (близкий конец);
this.otrueconfirm = document.getElementbyId (trueConfirm);
this.oconstart = 0;
this.oconitarget = 0;
this.init ();
}
Подтверждение ponpop.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.odelobj.onclick = function () {
_this.confirmshow ();
}
this.ooverlay.onclick = function () {
_this.titlebink ();
}
this.ocloseconfirm.onclick = this.otrueconfirm.onclick = function () {
_this.confirmhide ();
}
},
Подтверждение: function () {
this.Ooverlay.style.display = 'block';
this.odiv.style.display = 'block';
strivEmove (this.Ooverlay, {opacity: 30});
striveMove (this.odiv, {top: this.oconitarget, непрозрачность: 100})
},
TitleBink: function () {
var _this = это;
var ilighttimer = null;
var i = 0;
ilighttimer = setInterval (function () {
if (i%2) {
_This.otitle.style.background = '#60F';
}еще{
_this.otitle.style.background = '#ccc';
}
i ++;
if (i> 5) {
ClearInterval (IlightTimer);
}
}, 50)
},
Подтверждение: function () {
strivEmove (this.Ooverlay, {opacity: 0});
this.Ooverlay.style.display = 'none';
strivEmove (this.odiv, {top: this.oconstart, непрозрачность: 0});
}
}
Функция striveMove (obj, json, fn) {clearInterval (obj.itimer); obj.itimer = setInterval (function () {var bStop = true; for (var at in json) {var icur = 0; if (attr == 'opacity') {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 == 'opacity') {obj.style.filter = 'alpha (непрозрачность:'+ (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, false) [attr];}
Как использовать
1. включить файлы
Кода -копия выглядит следующим образом:
<Link rel = "styleSheet" type = "text/css" href = "delcss.css"/>
<script src = "Подтверждение точки. JS"> </script>
2. Вызов методов
Кода -копия выглядит следующим образом:
<Скрипт>
window.onload = window.onresize = function () {
Новый Подтверждениепоп ('btn', 'div1', 'overlay', 'title', 'closeconfirm', 'trueconfirm');
}
</script>
3. Будьте готовы
Кода -копия выглядит следующим образом:
<div id = "div1">
<h3 id = "title"> </h3>
<div id = "Подтверждение Конна">
Вы уверены, что хотите его удалить?
</div>
<a href = "###" id = "trueConfirm"> Подтвердить </a>
<a href = "###" id = "closeConfirm"> Отмена </a>
</div>
<div id = "наложение"> </div>
Этот код предоставляет пространство и записывает ваш собственный код DIV. В теге в поле определения вы можете заполнить удаленный адрес. Когда вы нажмете OK, вы перейдете к методу удаленной страницы.
Этот код может быть размещен в любом месте. Это не занимает место. Автор очень острый.
4. Предохранитель, триггер
Кода -копия выглядит следующим образом:
<a id = "btn"> <img src = "/images/default/right/ico_del.gif"/> </a>
Добавьте id = "btn" в значок Delete, который запустит эффект удаления.
Если вы хотите изменить стиль, вы можете перейти к CSS, чтобы изменить и настраивать.
Резюме: Такое удаление JS красивее, чем всплывающая коробка, которая поставляется с браузером. Автор использует всего 3K JS, чтобы написать этот эффект, что действительно удивительно.
PS, я только что принес это.
Недостатки: только один контент может быть удален. Потому что все ориентировано на идентификацию и не замужем.