js弹窗客服系统报价弹框

js弹窗客服系统报价弹框效果图：

HTML代码：

<!--弹窗 start-->

<div id="floatMenu">

            <div id="qs_rmenu" class="qs_rmenu">

                <div class="qs_btn ">

                    <a target="_blank" href="{fun labelcus(1,'body')}" class="on">

                        <img src="{$GLOBALS['skin']}jf/zxkf01.gif" alt="">

                        <img src="{$GLOBALS['skin']}jf/zxkf02.gif" alt="">

                    </a>

                </div>

                <div class="qs_btn">

                    <a href="javascript:;" id="qs_tanchu" onclick="popup.open()">

                        <img src="{$GLOBALS['skin']}jf/yjbj01.png" alt="">

                        <img src="{$GLOBALS['skin']}jf/yjbj02.png" alt="">

                    </a>

                </div>

                <div class="qs_btn qszs-tel">

                    <a href="#">

                        <img src="{$GLOBALS['skin']}jf/kfdh01.png" alt="">

                        <img src="{$GLOBALS['skin']}jf/kfdh02.png" alt="">

                    </a>

                    <div class="tel-content">

                        <p>24h免费热线</p>

                        <p>{fun labelcus(2,'body')}</p>

                    </div>

                </div>

            </div>

<!--弹窗 end-->

<script src="{$GLOBALS['skin']}jf/popup.js"></script>

<script>

                var popup = new PopUp(5000);

</script>

  <!--弹窗 end-->   

popup.js代码：

     * 报价弹窗组件

     * @param {Object} speed (必填)

     */

    function PopUp(speed) {

        //弹出时间

        this.speed = speed || 1000;

        this.init();

    }

    PopUp.prototype = {

        init: function () {

            var self = this;

            self._createNode();

            self.timer = setTimeout(function(){

                self.open();

            }, self.speed);

            setTimeout(function(){

                self.open();

            }, 45000);

            self.layertimer = setInterval(function () {

                self._runN(self._rangeRandom(80, 130))

            }, 1000);

            $("#pchx").on('keyup', function () {

                self._show_hx($(this).val(), this);

            });

        },

        //页面布局

        _createNode: function () {

            var slft = this;

            var html = `

                <div class="tk_layer_W clearaf" style="display: none; left: 2%; top: 62%; transform: scale(0);">

                <div class="lf_layerMf">

                    <h3>免费获取资质报价</h3>

                    <div class="bt_layer_ip clearaf">

<div class="baoming-div">

<div class="baojia">

<div class="bj_title">

<p style="text-align: center;">——&nbsp&nbsp已为<span class="peoplenum" style="color: red;">15294</span>人提供报价服务&nbsp&nbsp——</p>

</div>

<form action='/index.php?c=message&a=add&tid=1' method='post'>

<div class="bj_content">

<div class="name">

<span>

<img src="/skin/new/jf/name_icon.png" style="width:25px"/>

</span>

<input type='text' name='title' placeholder='输入您的姓名' autocomplete='off' alizi-request='1' class='alizi-input-text' value=''>

</div>

<div class="phone">

<span>

<img src="/skin/new/jf/phone_icon.png"/>

</span>

<input type='tel' name='mycall' placeholder='输入您的手机号' autocomplete='off' class='alizi-input-text'

alizi-request='1' value=''>

</div>

                                        <div class="zizhi">

                                            <span>

                                            <img src="/skin/new/jf/jsb_icon.png"/>

                                            </span>

                                            <input type='text' name='lytext' placeholder='您要办理的资质' autocomplete='off' class='alizi-input-text'

                                                 alizi-request='1' value=''>

                                        </div>

</div>

<p style="color:red;text-align:center;">*为了您的权益，您的隐私将被严格保密</p>

<input type='submit' id='alizi-submit' class='btn yyfw' style="margin-top:10px;" value='免费获取报价' />

</form>

</div>

</div>

<div class="hh_right" style="border-left: 1px solid mediumblue;width:411px;margin-left:127px;">

<h1>您的资质预算为：？元</h1>

<div>

<p>人员费用： ？元</p>

<p>业绩费用： ？元</p>

<p>服务费用： ？元</p>

</div>

<h4>已为数万家企业提供建筑资质服务</h4>

<a target="_blank" href="http://p.qiao.baidu.com/cps/chat?siteId=12241717&userId=25836485"class="on">

<img src="/skin/new/jf/kf.jpg"></img>

</a>

</div>

                    </div>

                </div>

                <div class="ls_close" style="cursor: pointer;">

                <i></i>

                    </div>

                </div>

            `;

            $('body').append(html);

            $('.ls_close').click(function () {

                slft.close();

            });

        },

CSS代码：

#floatMenu .qs_rmenu {

    position: fixed;

    left: 26px;

    bottom: 20%;

    margin-top: -100px;

    z-index: 9999;

}

#floatMenu .qs_rmenu .qs_btn,

#floatMenu .qs_rmenu .qs_rtop {

    width: 72px;

    height: 73px;

    border-radius: 4px;

    background: #000;

    margin-bottom: 2px;

    cursor: pointer;

    position: relative;

}

#floatMenu .qs_rmenu .qs_btn a {

    display: block;

    width: 100%;

    height: 100%;

}

#floatMenu .qs_rmenu .qs_btn a img:nth-of-type(2) {

    display: none;

}

/* #floatMenu .qs_rmenu .qs_btn:hover img:nth-of-type(1) {

    display: none;

}  */

/* #floatMenu .qs_rmenu .qs_btn.on img:nth-last-of-type(2) */

#floatMenu .qs_rmenu .qs_btn a.on img:nth-of-type(1),

#floatMenu .qs_rmenu .qs_btn a:hover img:nth-of-type(1) {

    display: none;

}

#floatMenu .qs_rmenu .qs_btn a.on img:nth-of-type(2),

#floatMenu .qs_rmenu .qs_btn a:hover img:nth-of-type(2) {

    display: inline-block;

}

.tel-content{

width:130px;

height:73px;

position:absolute;

right:-135px;

top:0px;

text-align:center;

color:#fff;

box-sizing:border-box;

background: #fff;

border: 1px solid #ccc;

border-top: 4px solid #003787;

box-shadow: 0 3px 8px rgba(0,0,0,.15);

border-radius:5px;

opacity:0;

transform:translateX(130px);

transition:.3s;

visibility:hidden;

z-index: 999;

padding-top: 10px;

}

.tel-content p{

line-height:24px;

color:#003787;

background: #fff;

}

.qszs-tel a:hover + .tel-content{

opacity:1;

transform:translateX(0);

visibility:visible;

}

/* 弹出框css */

.tk_layer_W {

  width: 968px;

  height: 460px;

  background: #fff;

  background: url(../images/tankuan.png) no-repeat;

  /* box-shadow: -3px 4px 6px #c7c3c3; */

  border-radius: 20px;

  position: fixed;

  top: 62%;

  left: 98%;

  margin-left: -484px;

  margin-top: -240px;

  padding: 35px 0 0 60px;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-transform: scale(0);

  transform: scale(0);

  -webkit-transition: all 0.7s;

  transition: all 0.7s;

  z-index: 99999999999999;

}

.ls_close {

  position: absolute;

  right: 20px;

  top: 88px;

  width: 40px;

  outline: 0;

  background: url(../images/close-bg.png) no-repeat;

  padding: 0;

  height: 28px;

}

.ls_close i {

  display: block;

  margin: 2px;

  background-color: #fff;

  width: 24px;

  height: 24px;

  background: url(../images/close-cl.png) no-repeat;

  overflow: hidden;

  transition: 1s ease-in-out 0s;

  -moz-transition: 1s ease-in-out 0s;

  -webkit-transition: 1s ease-in-out 0s;

  -o-transition: 1s ease-in-out 0s;

  -webkit-backface-visibility: hidden;

  background-size: contain;

}

.ls_close:hover i {

  -moz-transform: scale(1.1) rotate(360deg);

  -webkit-transform: scale(1.1) rotate(360deg);

  -webkit-transform-origin: 50% 50%;

  -moz-transform-origin: 50% 50%;

  -moz-transition: 1s ease-in-out 0s;

  -webkit-transition: 1s ease-in-out 0s;

}

.lf_layerMf h3 {

  font-size: 32px;

  color: #3960a4;

}

.le_city_phone {

  width: 339px;

  padding-top: 50px;

  float: left;

}

.bt_layer_ip{

    display: flex;

    padding-top: 35px;

}

.hh_right h1{

    font-size: 20px;

    text-align: center;

    font-weight: 500;

    margin-top: 10px;

    color: #3960a4;

    font-weight: bold;

}

.hh_right div{

    border: 1px #d8d8d8 solid;

    width:200px;

    height:122px;

    margin: 0 auto;

    text-align: center;

    line-height: 39px;

    margin-top: 15px;

    font-size: 16px;

    margin-bottom: 10px;

}

.hh_right h4{

    font-size: 17px;

    color: red;

    text-align: center;

}

.hh_right img{

    display: block;

    margin: 0 auto;

    margin-top: 18px;

    margin-bottom: 10px;

}

.hh_active{

    background: red;

}