首先在html中
<div class="backcap"> // 出现弹框之后背景变暗的标签
<div class="diolag">
<div class="diolag-div">
<img class="diolag-icon" src="{{ basePath }}/img/solution/app/close.png"> //右侧的关闭图标
<div class="img">
<img /> // 居中显示的图片
</div>
<h3 class="diolag-title"></h3> // 提示信息的标题
<p class="diolag-content"></p> // 提示信息的内容
<button type="button" class="diolag-close">确定</button>
</div>
</div>
</div>
在script标签中
$(".backcap").hide()
//弹框时，每次整个页面变暗一点
//设置.backcap类名的元素显示，css样式见下文
var changeBack = function (){
$(".backcap").show()
}
//设置.backcap类名的元素不显示，css样式见下文
var changeCome = function (){
$(".backcap").hide()
}
//设置.diolag 我弹出框消失
$(".diolag").hide()
//设置.diolag 中的右侧X点击后，弹出框消失
$(".diolag .diolag-icon").click(function () {
$(".diolag").hide()
changeCome()
})
//设置.diolag 中的下面的按钮点击后，弹出框消失
$(".diolag .diolag-close").click(function () {
$(".diolag").hide()
changeCome()
})
//当我点击.submit的时候，先验证正则
$(".submit").click(function (){
//获取页面高度的方法
var getHeight = function (){
let _width = document.documentElement.clientWidth; //屏幕宽
let _height = document.documentElement.clientHeight; //屏幕高
let boxWidth = 580;//正常不应该写死的，由于需要我这里写死了
let boxHeight = 330;//正常不应该写死的，由于需要我这里写死了
// console.log(boxWidth,_width,_height)
$(".diolag").show();
$(".diolag .diolag-div").css({
"left": (_width - boxWidth) / 2 + `px`,
"top": (_height - boxHeight) / 2 + `px`
})
}
// 获取正则手机号的数据
let contentData = $("#content").val()
let mobileData = $("#mobile").val()
let patt1=new RegExp("^1\\d{10}$")
//信息有误的时候
var getFail = function (){
changeBack()
console.log('tel is wrong')
//这是电话有误
$('.diolag .diolag-title').text("提交失败！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})
$('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/fail.png");
$('.diolag .diolag-content').text("老板, 您的手机号码填写有误，请确认填写正确后再提交一次吧！").css({
"font-size": "14px",
"color": "#7d88a2",
"line-height": "28px",
"margin-top": "160px"
})
}
// 提交成功时
var getSucess = function (){
changeBack()
console.log('success')
$('.diolag .diolag-title').text("提交成功！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})
$('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/success.png");
$('.diolag .diolag-content').text("老板, 您的信息已提交成功, 保持预留手机的通畅, 我们将尽快与您取得联系哦！").css({
"font-size": "14px",
"color": "#7d88a2",
"line-height": "28px",
"margin-top": "160px"
})
}
// 重复提交时
var getAgain = function (){
changeBack()
console.log('getagain')
$('.diolag .diolag-title').text("重复提交！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})
$('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/fail.png");
$('.diolag .diolag-content').text("老板, 您的信息已提交过啦, 请勿重复提交哦！").css({
"font-size": "14px",
"color": "#7d88a2",
"line-height": "28px",
"margin-top": "160px"
})
}
// 没有填写内容
var getNocont = function (){
changeBack()
console.log('getNocont')
$('.diolag .diolag-title').text("提交失败！").css({"font-size": "18px", "color": "#3b426b","font-weight":"400"})
$('.diolag .img img').attr("src", "{{ basePath }}/img/solution/app/fail.png");
$('.diolag .diolag-content').text("老板，您的需求信息还没有填写，请填写完整再提交哦！").css({
"font-size": "14px",
"color": "#7d88a2",
"line-height": "28px",
"margin-top": "160px"
})
}
//在此处声明一个布尔值，为了防止发送请求时用户重复提交
let lock = true
getHeight()
if(!patt1.test(mobileData)){
//执行电话有误的事件
getFail()
}else {
let subData = {
content: contentData,
mobile: mobileData,
type: 100
}
//这是成功的(如果进入发送请求需要判断lock)
if(lock){
lock = false
//发送请求
$.ajax({
type:"POST",
url:"请求地址",
data:subData,
success:function(msg){
if(msg.error == "0"){
getSucess()
}else if(msg.error=="-1"){
getNocont()
}
}
})
}
}
})
css样式
.solution-app .backcap{
background: rgba(0,0,0,0.5);
position:fixed;
width:100%;
height:1200px;
z-index:160;
top:0px;
}
.solution-app .diolag{
height:330px;
position: relative;
text-align: center;
float:left;
}
.solution-app .diolag-div{
position: fixed;
z-index:200;
width:580px;
height:330px;
padding:16px 134px;
box-sizing: border-box;
border-radius: 10px;
background: white;
}
.solution-app .img {
position: absolute;
text-align: center;
margin:18px auto;
margin-bottom: 16px;
left:245px;
}
.solution-app .diolag .diolag-icon{
position:absolute;
right:18px;
width:30px;
height:30px;
top:18px;
color:#d0d0d0;
}
.solution-app .diolag .diolag-close{
height:40px;
width:100px;
color:#fff;
font-size:14px;
margin-top: 24px;
background: #599bff;
border-radius: 4px;
cursor: pointer;
}
.solution-app .diolag-title{
position: absolute;
margin:0 auto;
left:250px;
top:140px;
}
