自定义弹出框居中显示

话不多少直接上代码

1.css内容

.mask{position:fixed;left:0;right:0;top:0;bottom:0;font-size:0;text-align:center;background:rgba(0,0,0,0.8);display: none}
.mask:after{content:"";height:100%;}
.mask:after,.main{display:inline-block;vertical-align:middle;}
.main{font-size:16px;
 background: white;}

2.html 内容

<div class="mask submitScoreInfo">
    <div class="main" style="border-radius:10px;">
        <div style="width: 250px;height: 200px;background: white;border-radius:10px;">
              <div style="height: 150px;line-height: 150px;text-align: center;">确定要提交本轮次比赛吗？</div>
              <div>
                  <div class="f_left" style="text-align: center;width: 50%;color: white;"><span style="background: #32AFFF;padding:5px 20px;border-radius:5px;" οnclick="errorInfo()">确定</span></div>
                  <div class="f_left" style="text-align: center;width: 50%;color: white;"><span style="background: #CCCCCC;padding:5px 20px;border-radius:5px;" οnclick="errorInfo()">返回</span></div>
                  <div style="clear:both"></div>
              </div>
        </div>
    </div>
</div>

3.js内容

  关闭弹出框

function errorInfo(){
    $('.submitScoreInfo').css("display",'block');
}

显示弹出框

$('.submitScoreInfo').css("display",'none');