프로젝트를 작성할 때 항상 오른쪽 하단에 팝업 알림이 필요합니다. 더 간단한 측면을 사용하고, 더 간결한 코드를 사용하고, 더 나은 사용자 경험을 달성하는 것이 우리가 원하는 것입니다. 이 시장에는 탄성 레이어가 많이 있지만 기능이 만족스럽지 않습니다. 아래에서는 앞서 작성해 현재도 적용 중인 자동 팝업 레이어를 공유하겠습니다.
스프링 레이어 예시 이미지:
구현 코드는 다음과 같습니다.
Css 스타일:
//右下角弹层
function Messager() {
this.layer = { '너비': 200, '높이': 100 };
this.title = '信息提示';
this.time = 4000;
this.anims = { '유형': '슬라이드', '속도': 600 };
this.timer1 = null;
this.isTiming = false;
this.obj_id = "msg_" $(document.body).find('msg_info').length;
var _obj, _title, _anims, _time;
_timer2 = null;
//初始化
this.inits = 함수(제목, 텍스트) {
_anims = this.anims;
_제목 = 제목;
var _html = '
';
_html = '
';
_html = '';
_html = ' ';
_html = '<글꼴>' 제목 '';
_html = ' ×';
_html = '';
_html = '';
_html = '
';
_html = '
';
_html = '
' 텍스트 '
';
_html = '
';
_html = '
';
_html = '
';
_html = '
';
$(document.body).prepend(_html);
_obj = $("." this.obj_id);
if ($.browser.msie) {
_obj.css('bottom', -5);
}
_obj.css('너비', this.layer.width);
_obj.find('.msg_bg_middle').css('너비', this.layer.width - 12);
_obj.find('.message_content').css('너비', this.layer.width - 2);
_obj.find('.msg_txt').css('너비', this.layer.width - 34);
_obj.find(".message_close").click(function () {
setTimeout(function () { closeMsg(); }, 1);
});
_obj.hover(function () {
clearTimeout(timer1);
clearInterval(_timer2);
_timer2 = 타이머1 = null;
}, function() {
timer1 = setTimeout(function () { closeMsg(); }, _time * 1000)
timing(_time * 1000)
});
};
//显示
this.show = 함수(제목, 텍스트, 시간) {
if(제목 == 0 || !title) title = this.title;
this.inits(제목, 텍스트);
if (time >= 0) this.time = time;
스위치(this.anims.type) {
case 'slide': _obj.slideDown(this.anims.speed); 부서지다;
케이스 '페이드': _obj.fadeIn(this.anims.speed); 부서지다;
케이스 '쇼': _obj.show(this.anims.speed); 부서지다;
기본값: _obj.slideDown(this.anims.speed); 부서지다;
}
this.rmmessage(this.time);
};
//设置宽高
this.lays = function (너비, 높이) {
if (너비 != 0 && 너비) this.layer.width = 너비;
if (높이 != 0 && 높이) this.layer.height = 높이;
};
//呈现属性
this.anim = 함수(유형, 속도) {
if(유형 != 0 && 유형) this.anims.type = 유형;
if (속도 != 0 && 속도) {
switch (속도) {
case '느림': ; 부서지다;
'빠른' 사례: this.anims.speed = 200; 부서지다;
'정상'인 경우: this.anims.speed = 400; 부서지다;
기본값: this.anims.speed = 속도; 부서지다;
}
}
};
//移除层时间
this.rmmessage = function (time) {
if (time > 0) {
timer1 = setTimeout(function () { closeMsg(); }, time );
if (this.isTiming) {
timing(시간);
}
}
};
//计时
timing = 함수(시간) {
_time = 시간 / 1000;
_timer2 = setInterval(function () {
_obj.find('.msg_bg_middle').find('font').html(_title ' [' (--_time) '秒后自动关闭]') ;
}, 1000);
}
//关闭层
closeMsg = function () {
switch (_anims.type) {
case 'slide': _obj.slideUp(_anims.speed); 부서지다;
'페이드' 사례: _obj.fadeOut(_anims.speed); 부서지다;
케이스 '표시': _obj.hide(_anims.speed); 부서지다;
기본값: _obj.slideUp(_anims.speed); 부서지다;
}
setTimeout(function () { _obj.remove(); }, _anims.speed);
}
}
var msg = '
当前有' json.total '个待审核用户等待您审核。
' json.stadate '';
var msgDiv = new Messager();
msgDiv.isTiming = true;
msgDiv.lays(300, 180);
msgDiv.show("사용户审核提醒", msg, 10000);