h5 css 弹框在页面加载完3秒后从底部弹出

5033FB5B-4521-429D-BDEE-97C5FC564867.png

css部分：

   <style>
    .phonetip_bg{display: none;
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0;
                top: 0;
                z-index: 10000;
                background-color: rgba(0,0,0,0.5);}

    . phonetipform{width: 270px;background-color: #ffffff;border-radius: 10px;padding-bottom: 10px;margin: auto;

    position: relative;animation:myfirst 1s;-webkit-animation:myfirst 1s;

    }
    . phonetipform h3{font-size: 17px;font-weight: bold;text-align: center;line-height: 46px;color: #333333;}

    . phonetipform a{display: block;width: 140px;height: 23px;line-height: 23px;border-radius: 11.5px;color: #fff;font-size: 16px;background-color: #008CD6;text-align: center;margin: 10px auto;}
    . phonetipform .check_sel{margin: 10px;}
    . phonetipform .check_sel label{display: inline-block;margin-left: 9px;margin-top: 7px;}
    . phonetipform >img{float: right;margin-top: -7px;width: 18px;}
</style>

h5部分

  <div class="phonetip_bg">
     <div class="phonetipform">

        <img class="delform" src="https://staticresource.liuxue315.cn/newgoal/form_del.png">

        <h3>有问必答 </h3>

        <div class="check_sel">

            <label><input type="checkbox" class="check">定位</label>

            <label><input type="checkbox" class="check">规划</label>

            <label><input type="checkbox" class="check">排名</label>

            <label><input type="checkbox" class="check">费用</label>

            <label><input type="checkbox" class="check">专业</label>

            <label><input type="checkbox" class="check">条件</label>

        </div>

        <a href="tel://123123">立即电话咨询</a>

    </div>

</div>

js代码

<script type="text/javascript">
        $(function(){
            //    3秒后弹窗弹出
            var height = document.documentElement.clientHeight;
            var fromheight = height+230;
            var toheight = height-230;
            var style = document.styleSheets[0];
            style.insertRule("@keyframes myfirst{from{ bottom: -"+fromheight+"px; }to{ bottom: -"+toheight +"px;}}");
            style.insertRule("@-webkit-keyframes myfirst{from{ bottom: -"+fromheight+"px; }to{ bottom: -"+toheight +"px;}}");
            style.insertRule(". phonetipform{ bottom: -"+toheight +"px;}");
            setTimeout(function(){
                $(".phonetip_bg").css('display','block');
            },10000);
            $('.delform').click(function(){
                $(".phonetip_bg").css('display','none');
            })

        });
</script>