自定義彈出框居中顯示

話不多少直接上代碼

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;" onclick="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;" onclick="errorInfo()">返回</span></div>
                  <div style="clear:both"></div>
              </div>
        </div>
    </div>
</div>

3.js內容

  關閉彈出框

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

顯示彈出框

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