IT基地

一、基础提示弹窗

代码

<style>
.msg{
    width: 50%;
    display: none;
    z-index: 999;
    position: fixed;
    left: 25%;
    top: 40%;
    background: rgba(0,0,0,0.8);
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    padding: 15px 10px;
    border-radius: 5px;
    margin-left: -10px;
}
</style>
<div class="msg"></div>
<script>
//消息提示框
function showmsg(msg){
    $('.msg').html(msg).show();
    setTimeout(function(){
        $('.msg').hide();
    },1500);
}
</script>

二、加载中弹窗

代码

<style>
.loadingbg{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 21;
    display: none;
}
.loading{
    width: 100px;
    height: 100px;
    line-height: 120px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    background: rgba(0,0,0,0.8);
    border-radius: 8px;
    z-index: 22;
    display: none;
}
.loading img{
    width: 60%;
    float: left;
    margin-left: 20%;
    margin-top: 20px;
}
</style>
<div class="loadingbg"></div>
<div class="loading"><img src="/images/loading.gif"></div>

素材