w3h5

联系客服Modal弹窗封装,支持自定义链接、提示内容和按钮文字

微信截图_20190708173404.png 联系客服Modal弹窗封装,支持自定义链接、提示内容和按钮文字 经验总结

封装了一个手机版的联系客服 Modal 消息弹窗,支持其他任何地方。

调用:customer(text'提示文字', href'跳转链接', btnText'按钮文字') 

HTML:

<button onclick="customer('确定要拨打0531-88888888?','tel:0531-88888888','拨打')">联系客服</button>
<div class="customer-modal">
    <div class="modal-box">
        <p>提示</p>
        <small></small>
        <div class="modal-confirm">
            <span onClick="cancleModal()">取消</span>
            <a id="confirm" href="">拨打</a>
        </div>
    </div>
</div>

jQuery:

function customer(text, href, btnText) { // 提示文字,跳转链接,按钮文字
    $("html,body").css({"height": "100%", "overflow": "hidden"}); // 设置高度100%,遮罩,防止弹窗后背景滑动
    $(".customer-modal").show();
    $(".customer-modal small").html(text);
    $(".customer-modal a").attr("href", href);
    $(".customer-modal #confirm").html(btnText);
}

function cancleModal() { // 关闭弹框
    $("html,body").css({"height": "auto", "overflow": "visible"}); // 解除高度限制
    $('.customer-modal').hide();
}

我把代码放在了 GitHub 上,需要的可以 点击访问

声明:本文由w3h5原创,转载请注明出处:《联系客服Modal弹窗封装,支持自定义链接、提示内容和按钮文字》 https://www.w3h5.com/post/361.html

赞 (0)
分享到: +More |

评论 沙发

换个身份