客服悬浮图标-点击留言弹出留言板设计

最新推荐文章于 2024-09-30 15:42:36 发布

小小优化师 anny

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量122

点赞数 3

文章标签：前端 js

本文链接：https://blog.csdn.net/q28000/article/details/139087315

版权

客服悬浮图标设计


 <div id="wave-container" > 
 <div class="kf">

 
<a href="#contact_f" type="button" onclick="locking()" > 

 <div class="kf-bt" > <div class="wave"></div>
 <div id="jb">
    <div class="jbbj-icon ">Hi,Anny speaking,how can I help you? </div>
 </div>
 
 <img src="/fedback/mail/kf-anny.jpg">

</a>
 
    

</div> 
     <!-- //KF -->
 
 </div>



<script>
 // 获取元素
var element = document.getElementById('jb');
 
// 定义显示函数
function showElement() {
    element.style.display = 'block';
}
 
// 设置延迟时间（例如5秒）并执行
setTimeout(showElement, 15000); // 延迟5秒显示元素
 
//中心渐变扩散
function createWave(container) {
    const wave = document.createElement('div');
    wave.classList.add('wave');
    container.appendChild(wave);
 
    setTimeout(() => {
        wave.remove();
    }, 2500);
}
 
const waveContainer = document.getElementById('wave-container');
createWave(waveContainer);

</script>
 
 



     <div id="ly" id="show" style="display: none"  >
     <!-- <div class="rclose" align="right"></div>  -->

  <script>  
  function    locking(){  
   document.all.ly.style.display="block";
   document.all.Layer2.style.display='block';  
   }  
  function    Lock_CheckForm(theForm){  
   document.all.ly.style.display='none';
    document.all.Layer2.style.display='none';  
    document.all.show.style.display='block'; //show
  return   false;  
   }  
    </script>

<h3>To Yunda Paper Machinery</h3>
 

 <form id="form" name="form" method="post" action="/fedback/mail/tomail.php"  >
 
    <div class="column">
    <input type="text"  name="name" class="fl" placeholder="Your Name" />
   </div>
    
    <div class="column">
    <input type="text" name="email"  class="fr" placeholder="Your E-mail " />
   </div>
    <div class="column">
    <input type="text" name="phone" class="fl" placeholder="Your Phone/Whatsapp " /> 
   </div>
<!--     <div class="column">
    <input type="text" name="country" class="fr" placeholder="Your Country/Region" />
   </div> -->
       <div class="column">
    <input type="text" name="company" class="fr" placeholder="Your Company" />
   </div>
<!--        <div class="column">
    <input type="text" name="capacity" class="fr" placeholder="Capacity" />
   </div> -->
     <div id="sub_txt" class="column"> 
    <textarea name="content" cols="40" rows="3" maxlength="200" aria-Required="true" aria-invalid="false" placeholder="Your Message: (*)Tips,Please tell us your detailed needs, such as machine names, capacities, etc."></textarea>
    
 
   </div>
 



    <div class="column-s"> <input type="radio" name=" " checked="checked"> <span class="wpcf7-list-item-label">We value your privacy. I have read and agree to the YunDa <a href="/privacy-policy/">Privacy Policy *</a></span> 
    </div>

 
  <div id="sub_button" class="form-control column"> 
    <button type="submit" >Send inquiry now </button>
  </div>

<div class="column-cc">
  <a type="button" onclick="Lock_CheckForm(this);"> Cancel </a>  
</div>
   <input type="hidden" name="lang" value="en" />
   <input type="hidden" name="ip" value=" " />
   <input type="hidden" name="fdtitle" value=" " />
   <input type="hidden" name="id" value="6-pp" />
 
  </form>

 
     </div> <!-- ly -->


  <div id="Layer2" style="display: none; "  >   </div>   <!-- layer2 背景层   onclick="Lock_CheckForm(this);" -->

CSS 样式

 
 .contact_form h3 {  
  line-height: 38px; margin:0;
}
.contact_form  { clear:both; margin: 15px 0; position:relative;}
.contact_form div {
  margin: 10px 0; padding: 0 5px;
}

button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline; width:100%;}
button,input{line-height:normal}
button,html input[type=button],input[type=reset],input[type=submit]{border-radius:10px;border:0;background:#215DB8; cursor:pointer;-webkit-appearance:button;padding:10px 20px;color:#FFF}
button:active,button:focus,button:hover,html input[type=button]:active,html input[type=button]:focus,html input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background:#025099}
.button{padding:10px 20px;display:inline-block}
 

button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input[type=text],input[type=email],input[type=url],input[type=password],input[type=tel],input[type=search],textarea{background:#fff;color:#666;border-radius:3px;padding:10px 15px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%}
input[type=text]:focus,input[type=email]:focus,input[type=url]:focus,input[type=password]:focus,input[type=tel]:focus,input[type=search]:focus,textarea:focus{color:#111;background:#FFF}
textarea{overflow:auto; vertical-align:top;width:100% ;}
input[type=file]{max-width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box ;}
button {
    cursor: pointer;
    height: 35px;
}
#sub_txt {width:100% ; } 
#sub_txt textarea { padding:15px 10px; }
.contact_form input::-webkit-input-placeholder , .contact_form textarea::-webkit-input-placeholder { color:#0d0000;
}

.contact_form input::-moz-placeholder {  color:#0d0000;
}

.contact_form input:-moz-placeholder {  color:#0d0000;
}

.contact_form input:-ms-input-placeholder {  color:#0d0000;
}

 

.column{padding:0 10px; width:50% ; display: inline-block; float: left;}
.column-s input { width:5% ; float:left; }
 .column-cc { text-align:center; }
.column input { line-height: 31px ;background: #fff ;}
 
.sidebar-con-f { box-shadow: 0 1px 8px rgba(0,0,0,.11);     margin-top: 25px;
     padding: 30px 30px;  }
.sidebar-con-f .column {width:99% ; clear: both; border: dotted 1px #c7c4c4;  
margin: 3px 0;  }
.sidebar-con-f .column input { line-height: 16px ; }
.sidebar-con-f a:hover { color:#fff; }
     #ly {width: 580px;  height:658px; padding: 15px;  background:#f5f5f5; position:fixed;
     top: 135px; left: 0; right: 0; bottom: 0; margin: 0 auto;
     z-index:99999;border-radius:15px;border:1px solid #dddddd;  }

     #ly .column { margin: 15px 0 ; width:100% ;  }
     #ly > h3 { 
     font-size: 26px;
    line-height: 55px;
    text-align: center;
    font-weight: 700;
    margin: 0;
    }

   #Layer2 {background:rgb(0 0 0 / 93%);opacity: 1; cursor:pointer; width: 100%; height:100%;
position: fixed;
top: 0;
left: 0;
z-index:999;
}
 .rclose { padding: 5px 20px 0 0; font-size: 18px;  }
#sub_button {margin: 10px 0 0 ;   }
@media screen and (max-width: 600px) {  
.column{padding:0 ; width:100% ; clear: both; margin: 5px 0!important;
}
.column input { line-height: 15px;}
.right-nav , #ly,#Layer2 { display:none; }

     #ly { 
         width: 99% !important;
    padding: 0px 25px;
    height: 72%;
    background: #f5f5f5;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 9999;
    border-radius: 15px;
    border: 1px solid #dddddd;
     }

}



.right-nav { display: none;
    position: fixed;
    top: 350px;
    right: 0;
    z-index: 999;
    width:65px;
   
        border-radius: 6px;
    color: #828282;
    background: #215DB8;
    box-shadow: 0 0 6px rgba(0,0,0,.1);
    text-align: center;
}


 
.right-nav-item {
display : block;
margin-bottom : 2px;
text-align : center;
color : #73757A;
   
    width: 68px;
    height: 30px;
    margin: 20px 0;
 
    justify-content: space-around;
    transition: color .15s;
}

.right-nav-item i {
font-size : 30px;
color:white;
}

 .right-nav-item  a  { color:black; }
 
 


 .kf  {
 
    position: fixed;
    right: 50px;
    bottom: 280px;
    z-index: 99;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
 
}

    .kf-bt  {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 31px;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, .16);
    cursor: pointer;
    text-decoration: none;
    background-color: #00a6f1;
}
.kf-bt img { border-radius: 30px; 
     width: 59px;
    height: 59px;  }

#jb {   display: none; white-space: nowrap; }
.jbbj-icon  {
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    top: -10px;
    right: 0; 
    background: red;
    color: #fff;
    border-radius: 999px;
    padding: 0 0.5em;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    transform: scale(.7);
    font-family: tahoma!important;
}

 
.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #0099ff, transparent);
    animation: wave-animation 5s infinite;
    border-radius:50%;
    z-index: -100;
}
 
@keyframes wave-animation {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}