효과는 다음과 같습니다.
CSS 파일 delcss.css
코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
*{마진 : 0;}
Div1 {300px; - 색인 : 2; 불투명도 : 0;
#div1 h3 {높이 : 20px;#60F;}
#오버 레이 : 100%: 왼쪽;
#높이 : 20px; 위치 : 절대; 오른쪽; 오른쪽;}
#wide {80px; 위치 : 절대; 오른쪽; 오른쪽;}
#confirmcon {텍스트-컬러; #ccc;
JS 파일 확인 pop.js
코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 컨퍼런스 (delobj, confinmain, 오버레이, binktitle, closeconfirm, trueconfirm) {
this.odelobj = document.getElementById (delobj);
this.odiv = document.getElementById (확인 메인);
this.ooverlay = document.getElementById (오버레이);
this.otitle = document.getElementById (binktitle);
this.ocloseconfirm = document.getElementById (closeConFirm);
this.otrueconfirm = document.getElementById (trueconFirm);
this.oconstart = 0;
this.oconitarget = 0;
this.init ();
}
quicationpop.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 ();
}
},
확인 쇼 : function () {
this.overlay.style.display = '블록';
this.odiv.style.display = 'block';
StriveMove (this.ooverlay, {불투명도 : 30});
StriveMove (this.odiv, {top : this.oconitarget, 불투명도 : 100})
},
titlebink : function () {
var _this = 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, {불투명도 : 0});
this.overlay.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 attr in json) {var icur = 0; if (attr == '불투명도') {icur = math.round (parsefloat (getstyle (obj, attr));} else {icur = parseint (getstyle (obj, attr));} var ispeed = (json [attr] -icur )/8; ispeed = ispeed> 0? math.ceil (ispeed) : math.floor (ispeed); if (attr == '불투명도') {obj.style.filter = 'alpha (불투명도 :'+ (icur+ ispeed )+')'; obj.style.opacity = (icur+ispeed)/100;} else {obj.style [att bstop = false;}} if (bstop) {clearinterval (obj.itimer); if (fn) {fn (fn ();}}}, 30)} 함수 getstyle (obj, att CurrentStyle [att
사용
1. 파일을 소개합니다
코드 사본은 다음과 같습니다.
<link rel = "Stylesheet"type = "text/css"href = "delcss.css"/>
<script src = "quicatepop.js"> </script>
2. 통화 방법
코드 사본은 다음과 같습니다.
<cript>
window.onload = window.onResize = function () {
New ConfertPop ( 'btn', 'div1', 'Overay', 'title', 'closeconfirm', 'trueconfirm');
}
</스크립트>
3. 준비하십시오
코드 사본은 다음과 같습니다.
<div id = "div1">
<h3 id = "제목"> </h3>
<div id = "확인">
삭제 하시겠습니까?
</div>
<a href = "###"id = "trueconfirm"> 확인 </a>
<a href = "###"id = "CloseConfirm"> 취소 </a>
</div>
<div id = "오버레이"> </div>
이 코드는 공간을 제공하고 자신의 div 코드를 작성합니다. 결정 상자의 A 태그에서 삭제 된 주소를 채울 수 있습니다. 확인을 클릭하면 삭제 된 페이지 메소드로 이동합니다.
이 코드는 어디에나 배치 할 수 있습니다. 공간을 차지하지 않습니다. 저자는 매우 날카 롭습니다.
4. 퓨즈, 트리거
코드 사본은 다음과 같습니다.
<a id = "btn"> <img src = "/images/default/right/ico_del.gif"/> </a>
삭제 아이콘에 id = = "btn"을 추가하여 삭제 효과가 트리거됩니다.
스타일을 수정하려면 CSS로 이동하여 수정하고 조정할 수 있습니다.
요약 : 이러한 JS 삭제는 브라우저와 함께 제공되는 팝업 박스보다 더 아름답습니다. 저자는 3K JS 만 사용 하여이 효과를 작성합니다. 이는 정말 놀랍습니다.
추신, 방금 가져 왔습니다.
단점 : 하나의 컨텐츠 만 삭제할 수 있습니다. 모든 것이 ID 지향적이며 단일이기 때문입니다.