封装了一个手机版的联系客服 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://cloud.tencent.com/developer/article/1538119