外贸网站建设,外贸网站建设公司,跨境电商独立站

功能包括：

1：一开始默认是关闭状态，5秒后自动弹出

2：点击顶部的按钮，可以实现打开和关闭。

<style type="text/css" media="all">
.foot-yuding {
    width: 350px;
    height: 440px; 
    border: 1px solid var(--colorpink);
    background: #fff;
    position: fixed;
    right: 0;
    bottom: -400px; /* 默认隐藏（隐藏高度可根据需要调整） */
    z-index: 999999;
    text-align: left;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    /* 添加平滑过渡效果（带有轻微弹性/cubic-bezier效果） */
    transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
} 

/* 展开时的 CSS 类 */
.foot-yuding.open {
    bottom: 0 !important;
}

.foot-yuding .head {
    color: #fff;
    background: var(--colorpink);
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    cursor: pointer; /* 鼠标悬停显示手型 */
    user-select: none; /* 防止频繁点击选中文字 */
}

.foot-yuding .head #foot-close {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

/* 图标旋转过渡样式 */
.foot-yuding .head #foot-close i {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* 展开状态下图标旋转 180 度 */
.foot-yuding.open .head #foot-close i {
    transform: rotate(180deg);
}

.foot-yuding .tc-foot {
    background: #fff;
    box-shadow: none;
}
</style>
<div class="foot-yuding" id="footyuding">      
        <div class="head">
            <div class="row">
                <div class="col-10">Leave Your Message</div>
                <div class="col-2"><div  id="foot-close"><i class="bi bi-chevron-up fs-24"></i></div> </div>
            </div>
        </div>  
           <div class="tc-left tc-foot">
                  <form  action="{pboot:msgaction}"    method="post"  >
                                            <div class="form-group">                                 
                                                    <input type="text" name="contacts" required id="contacts" class="form-control" placeholder="Your name"  maxlength="10">                               
                                            </div>
                                            
                                            <div class="form-group">                                
                                                    <input type="text" name="mobile" required id="mobile" class="form-control" placeholder="Your Phone/WhatsApp/WeChat"  maxlength="15">                                
                                            </div>
                
                                             <div class="form-group">                             
                                                    <input type="text" name="email" required id="email" class="form-control" placeholder="Your Email"  maxlength="50">                             
                                            </div>
                                            
                                             <div class="form-group">                             
                                                    <input type="text" name="country" required id="country" class="form-control" placeholder="Your Country"  maxlength="50">                             
                                            </div>
                                            
                                            <div class="form-group form-group2">   
                                             <label for="contentfoot" class="sr-only" >Message</label>
                                                    <textarea name="content" id="contentfoot" class="form-control form-control-text " placeholder="Please leave your detailed messages and we are ready to serve you."  maxlength="500"></textarea>                               
                                            </div>
                                                 <input type="text" hidden name="url" required id="url" class="form-control" value="{pboot:pageurl}">
                                            
                                        
                                              <div class="form-group">   
                                               <button type="submit"  id="buttonSelect3" class="send-btn ">Send</button>
                                               
                                            </div>
                                            
                                        </form> 
                       
                 
                  </div>
           
    
</div>
 <script>
document.addEventListener('DOMContentLoaded', function() {
    var footYuding = document.getElementById('footyuding');
    var headBtn = footYuding.querySelector('.head');

    // 1. 默认 5 秒后，弹性向上打开
    setTimeout(function() {
        footYuding.classList.add('open');
    }, 5000);

    // 2. 点击 .head 头部，实现展开和收缩切换
    if (headBtn) {
        headBtn.addEventListener('click', function() {
            footYuding.classList.toggle('open');
        });
    }
});
</script>