FLOATING COMMENT base-LinkMagz

Oleh Ndi Uke 15 Des, 2021 2 komentar

CSS / doble click to select

  
<style>
#show{
  width:50px;
  height:50px;
  background:#fff;
  color:#666;
  font-size:22px;
  font-weight:bold;
  border-radius:50px;
  position:fixed;
  bottom:25px;
  left:25px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.wrappers{
  position:fixed;
  left:0;top:0;
  width:0;
  height:100vh;
  transition:all .2s;
  background:#2227;
  z-index:99;
  }
.blogger-comment-from-post{
  display:flex;
  position:fixed;
  transition:all ease .5s;
  left:13px;bottom:-400px;
  border:2px solid#6667;
  border-radius:7px;
  background:#fff;
  padding:10px;
  max-width:90%;
  z-index:100;
  }
.comment-close{
  font-size:24px;
  width:50px;
  height:50px;
  border-radius:50px;
  position:fixed;
  display:flex;
  justify-content:center;
  align-items:center;
  bottom:-900px;
  left:25px;
  background:#fff;
  color:#666;
  z-index:101;
  }
@media only screen and (max-width:480px){.blogger-comment-from-post{width:88%;}}
@media only screen and (min-width:600px){.blogger-comment-from-post{max-width:93.5%;}}
@media only screen and (min-width:800px){.blogger-comment-from-post{max-width:40%;left:15%;}}
</style>

HTML / doble click to select

  
<div class='comment-close fa fa-times'></div>
<div class='wrappers'></div>
<div id='show' class='fa fa-comment-o'></div>

JS / doble click to select

  
<script>
$(document).ready(function(){
   $("#show").click(function(){
     $(".blogger-comment-from-post").css("bottom","60px");
     $(".wrappers").css("width","100%")
     $("#show").css("left","-400px")
     $(".comment-close").css("bottom","25px");
     });
   $(".wrappers,.comment-close").click(function(){
     $(".blogger-comment-from-post").css("bottom","-900px");
     $(".wrappers").css("width","0")
     $(".comment-close").css("bottom","-400px")
     $("#show").css("left","25px");
     });
  });
</script>

Ndi Uke Request dari kalian akan sangat membatu saya membuat artikel selanjutnya.

FLOATING COMMENT base-LinkMagz

2 komentar untuk "FLOATING COMMENT base-LinkMagz"