js 확인 삭제 대화 상자 effect_javascript 기술에 대한 샘플 코드-JS 튜토리얼-php.cn

js 확인 삭제 대화 상자 effect_javascript 기술에 대한 샘플 코드

WBOY

풀어 주다： 2016-05-16 16:59:12

원래의

990명이 탐색했습니다.

效果如下：

css文件delcss.css

代码如下：

复代码如下：*{ margin:0; 패딩:0;}

#div1{ 너비:300px; 높이:100px; 테두리 반경:10px; 배경:#f60; 상자 그림자:5px 5px 10px #ccc; 위치:절대; 왼쪽:50%; 여백-왼쪽:-150px; Z-색인:2; 불투명도:0; 필터:알파(불투명도:0); 디스플레이:없음;}

#div1 h3{ 높이:20px; 배경:#60f;}
#오버레이{ 너비:100%; 높이:100%; 배경:#ccc; 위치:절대; 왼쪽:0; 상단:0; 불투명도:0; Z-색인:1; 디스플레이:없음;}
#closeConfirm{ 너비:80px; 높이:20px; 줄 높이:20px; 배경:#ccc; 테두리 반경:5px; 표시:블록; 텍스트 장식:없음; 색상:#000; 텍스트 정렬:가운데; 위치:절대; 하단:10px; 오른쪽:10px;}
#trueConfirm{너비:80px; 높이:20px; 줄 높이:20px; 배경:#ccc; 테두리 반경:5px; 표시:블록; 텍스트 장식:없음; 색상:#000; 텍스트 정렬:가운데; 위치:절대; 하단:10px; right:100px;}
#confirmCon{ text-align:center; 색상:#ccc; 높이:40px; line-height:40px;}



js文件confirmPop.js

代码如下：

复代码如下：代码如下:

ConfirmPop(delObj,confirmMain,overlay,binkTitle,closeConfirm,trueConfirm){
    this.oDelObj=document.getElementById(delObj);
    this.oDiv=document.getElementById(confirmMain);
    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();
}
ConfirmPop.prototype={
    초기화: 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.titleB 잉크() ;
        }
        this.oCloseConfirm.onclick=this.oTrueConfirm.onclick=function(){
           _this.confirmHide();
        }

    },
    확인표시: function(){
        this.oOverlay.style.display='block';
        this.oDiv.style.display='block';
        노력Move(this.oOverlay,{ opacity:30});
        노력Move(this.oDiv,{top:this.oConItarget, opacity:100})
    },
    titleBink:function(){
        var _this=this;
        var iLightTimer=null ;
        var i=0;
        iLightTimer=setInterval(function(){
           if(i%2){
                   } else{
                _this.oTitle.style.Background='#ccc';    >      },50)
    },
    확인숨기기:기능( ){
        노력Move(this.oOverlay,{opacity:0});
        this.oOverlay.style.display='none';
        노력Move(this.oDiv,{top:this.oConStart, 불투명도) :0});
    }

}
함수 노력Move(obj,json,fn){clearInterval(obj.iTimer);obj.iTimer=setInterval(function(){var bStop=true;for(var attr 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(opacity:' (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)}함수 getStyle(obj,attr ){return obj.currentStyle?obj.currentStyle[attr]:getCompulatedStyle(obj,false)[attr];}

사용방법

1. 파일 가져오기

코드 복사 코드는 다음과 같습니다.

2 .통화 방법

코드 복사 코드는 다음과 같습니다.

< ;script>
window.onload=window.onresize=function(){
 newConfirmPop('btn','div1','overlay','title','closeConfirm','trueConfirm');
}
< /script>

3. 준비

코드 복사 코드는 다음과 같습니다.

삭제하시겠습니까?

확인
취소

이 코드는 제공됩니다 Space, div 내가 직접 작성한 코드. 확인 상자의 라벨에 삭제된 주소를 입력할 수 있습니다. 확인을 클릭하면 삭제된 페이지 방법으로 이동합니다.

이 코드는 어디에나 배치할 수 있습니다. 공간을 차지하지 않습니다. 저자는 매우 예리합니다.

ID가 포함된 삭제 아이콘 추가 ="btn "이면 삭제 효과가 발동됩니다.

스타일을 수정하고 싶다면 CSS에서 수정하고 조정할 수 있습니다. 요약: 이런 JS 삭제는 브라우저에서 제공하는 팝업 상자보다 더 아름답습니다. 저자는 이 효과를 만들기 위해 단 3,000개의 js를 사용했는데, 정말 놀랍습니다.

ps, 방금 가져왔습니다. 

단점: 콘텐츠 한 개만 삭제할 수 있습니다. 모든 것이 ID별로 다르므로 통일되어 있습니다.