前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >联系客服Modal弹窗封装,支持自定义链接、提示内容和按钮文字

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

作者头像
德顺
发布2019-11-13 14:08:41
1.4K1
发布2019-11-13 14:08:41
举报
文章被收录于专栏:前端资源前端资源

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

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

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
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://cloud.tencent.com/developer/article/1538119

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档