标题：联系客服Modal弹窗封装，支持自定义链接、提示内容和按钮文字超级好看实用
演示图：
封装了一个手机版的联系客服 Modal 消息弹窗，支持其他任何地方。
调用：customer(text'提示文字', href'跳转链接', btnText'按钮文字')
css：
* {
box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
}
a, a:hover, a:visited, a:link, a:active, a:focus {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}
button{
display: block;
line-height: 50px;
width: 80%;
margin: 40% auto;
border: none;
border-radius: 8px;
outline: none;
background: #3B79FE;
color: #FFF;
font-size: 20px;
}
.customer-modal {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 58% 10% 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
text-align: center;
}
.modal-box {
background: #FFF;
border-radius: 8px;
}
.modal-box p {
font-size: 18px;
font-weight: 600;
padding-top: 20px;
}
.modal-box small {
margin: 25px 0;
display: block;
width: 100%;
white-space: nowrap;
color: #AEB5C5;
}
.modal-confirm {
border-top: 1px solid #DAE2F3;
display: flex;
height: 48px;
line-height: 48px;
}
.modal-confirm span, .modal-confirm a {
display: block;
width: 50%;
}
.modal-confirm #confirm {
border-left: 1px solid #DAE2F3;
color: #3B79FE;
}
HTML：
<button onclick="customer('确定要拨打0851-114？','tel:0851-114','拨打')">联系客服</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：
f
unction 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();}
版权声明：本文内容由极全网实名注册用户自发贡献，版权归原作者所有，极全网-官网不拥有其著作权，亦不承担相应法律责任。具体规则请查看《极全网用户服务协议》和《极全网知识产权保护指引》。如果您发现极全网中有涉嫌抄袭的内容，点击进入填写侵权投诉表单进行举报，一经查实，极全网将立刻删除涉嫌侵权内容。
扫一扫在手机打开
评论
已有0条评论
0/150
提交
热门评论
