小冬SEO

m移动端留言弹窗源码

2021-11-12 22:23:53 236794 网站建设

跟上一个PC端代码相同,这个移动端的留言弹窗也是朋友帮忙写的代码,功能和PC端的相同,下面直接上代码了:

<script type="text/javascript" >
    var div=document.createElement("div"),
    style=document.createElement("style"),
    title=document.createElement("div"),
    form=document.createElement("form"),
    func=document.createElement("div"),
    close=document.createElement("span"),
    active=document.createElement("div"),
    setAttributes=(el, attrs)=>{
        for(var key in attrs) {
            el.setAttribute(key, attrs[key]);
        }
    };
setAttributes(form,{"id":"form","novalidate":"novalidate","data-status":"init","action":"<? echo home_url( add_query_arg( array() ) );?>","method":"post","onsubmit":"return false","class":"wpcf7-form init"})
//这个wordpress表单的写法
div.setAttribute("class","calc");
close.setAttribute("id","close");
active.setAttribute("id","active");
title.setAttribute("id","title");
title.innerHTML="<h2>您有一份<b> xx产品 </b>报价清单</h2><p>输入手机号免费获取</p>";
active.innerHTML="<em></em>";
style.innerHTML=".calc.active{opacity:1;visibility:visible}.calc{width:88%;max-width:360px;color:#666;text-align:center!important;background:#fff!important;padding:0 15px;box-sizing:border-box;border-radius:5px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;box-shadow:0 0 18px #cccccc;opacity:0;visibility:hidden;transition:.15s ease;transition-property:opacity,visibility}.calc #title{color:#005fbb;margin:25px auto 15px}.calc #title h2{letter-spacing:1px}.calc #title b{color:#ff4444}.calc #title p{color:#999;font-size:90%;margin:10px auto}.calc span:hover{background:#e8e8e8!important;}.calc span{background:#f5f5f5!important;cursor:pointer;user-select:none;-webkit-user-select:none;}.calc input{width:95%;height:50px;font-size:15px;border:1px solid #ccc;padding:0 15px;box-sizing:border-box;border-radius:5px}.calc button:hover{background:red}.calc button{font-size:18px;line-height:40px;color:#fff;background:#ff4444;padding:0 15%;margin:15px auto;border-style:none;position:relative;outline:none;cursor:pointer;overflow:hidden;border-radius:50px;letter-spacing:5px}.calc button em{opacity:.45;width:45px;height:100%;display:block;background:url(../images/btn_bg.png) center /cover;position:absolute;top:0;left:-50px;animation:flush linear 1.75s infinite normal;-webkit-animation:flush linear 1.75s infinite normal}.calc #close:before{transform:translate(-50%,-50%) rotate(45deg)}.calc #close{width:35px!important;height:35px;position:absolute;top:-15px;right:-15px;border:4px solid #fff;border-radius:50px}.calc #close:after{transform:translate(-50%,-50%) rotate(-45deg)}.calc #close:before,.calc #close:after{content:'';width:58%;height:1px;background:currentColor;position:inherit;top:50%;left:50%;opacity:.66}#active:hover{background:red}#active{width:70px;height:70px;background:#ff4444;position:fixed;top:50%;left:5%;transform:translate(5%, -50%);z-index:999;border-radius:50%}#active em{content:'';width:60%;height:60%;display:block;background:url(../images/tel_tool.png) center /cover;margin:15px auto;cursor:pointer;animation:shake 1.15s infinite;-webkit-animation:shake 1.15s infinite}@keyframes shake{from{transform:scale3d(1,1,1)}8%,16%{transform:scale3d(.9,.9,.9)rotate3d(0,0,1,-3deg)}24%,40%,56%,72%{transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,3deg)}32%,48%,64%{transform:scale3d(1.1,1.1,1.1)rotate3d(0,0,1,-3deg)}to{transform:scale3d(1,1,1)}}@keyframes flush{0%{left:-50%}30%{left:-50%}70%{left:100%}100%{left:100%}}";
form.innerHTML='<input type="tel" name="tel-883" id="phone" placeholder="请输入您的手机号"><input type="hidden" name="_wpcf7" value="2032" /><input type="hidden" name="_wpcf7_version" value="5.4.2" /><input type="hidden" name="_wpcf7_locale" value="zh_CN" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2032-o1" /><input type="hidden" name="_wpcf7_container_post" value="0" /><input type="hidden" name="_wpcf7_posted_data_hash" value="" />';
func.innerHTML='<button id="button">立即获取<em></em></button>';
document.body.appendChild(div).appendChild(close).appendChild(style);
document.body.appendChild(active);
var calcs=document.getElementsByClassName("calc")[0];
calcs.appendChild(title);
calcs.appendChild(form);
var FORM=document.getElementById("form");
FORM.appendChild(func)
var input=document.querySelectorAll(".calc input")[0],
    close=document.getElementById("close"),
    max=11,num=0,
    once = setTimeout(function(){
        num++;
        calcs.classList.add('active');
        console.log(num)
    }, 15000),
    twice,  //set interval as global scope
    twiceRun=function(){
        twice = setInterval(function(){
            num++;
            calcs.classList.add('active');
            clearInterval(twice)  //clear after interval
            console.log(num)
        }, 10000)
    };
input.oninput=()=>{
    input.value=input.value.replace(/[^\d]/g,'');  //number filter
    input.value.length>=max ? (FORM.removeAttribute("enctype"),FORM.submit()) : false
}
button.onclick=()=>{
    input.focus()
}
close.onclick=function(){
    num--;
    calcs.classList.remove("active");
    twiceRun();
    console.log(num)
}
active.onclick=function(){
    clearInterval(twice);
    num<1 ? (num++,calcs.classList.add('active'),clearTimeout(once)) : (num--,calcs.classList.remove("active"),twiceRun());
    console.log(num)
}
</script>

不懂的可以去看PC端留言弹窗11位数自动提交源码

版权保护: 本文由小冬SEO编辑发布,转载请保留链接: http://www.myseoyh.cn/jianzhan/164.html