Side Alert
HTML
<div class="slider-alert-box">
<div class="close-alert">
<svg x="0px" y="0px" viewBox="0 0 27.3 27.3" style="enable-background:new 0 0 24 24;">
<path d="M26.8,0.4V23h-1.7V3.3L1.4,27.1l-1.2-1.2L24,2.1H4.3V0.4H26.8z"/>
</svg>
</div>
<div class="">Copy</div>
</div>
CSS
.slider-alert-box{
display:block;
position:fixed;
width:280px;
min-height:100px;
right:-260px;
top:60px;
border-radius: 30px 0 0 30px;
transition:all 0.5s;
background: rgba(0, 169, 206, 0.1);
}
.slider-alert-box.show{
right:-1px;
}
.slider-alert-box .close-alert{
width:32px;
height:32px;
border-radius:16px;
background-color:navy;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
left:-16px;
top:calc(50% - 16px);
cursor: pointer;
}
.close-alert svg{
fill:#fff;
width:14px;
height:14px;
transition: all 0.5s;
}
.slider-alert-box.show .close-alert svg{
transform: rotate(0);
}
JAVASCRIPT
$( document ).ready(function() {
setTimeout(function(){
$('.slider-alert-box').addClass('show');
}, 7000);
setTimeout(function(){
$('.slider-alert-box').removeClass('show');
}, 13000);
''
$('.close-alert').click(function() {
$('.slider-alert-box').toggleClass('show');
});
});
