欢迎您光临本站
首页 > html+css > 正文
faddei头像
faddei

2021-07-10

评论者
html+css
0 1

一、基础提示弹窗

1561687611715822.png

代码

<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>


二、加载中弹窗

1561687838450003.png

代码

<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>


素材

1561688027861968.gif

版权声明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。

147

精彩推荐

暂无评论

文明用语