封装了一个手机版的联系客服 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 上,需要的可以 点击访问
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/150349.html