jQuery一次弹框实例

发布时间：2020-07-23 21:08:34 作者：bigbeatwu
来源：网络阅读：272

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹框</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">

$(function(){
    var $befread = $.cookie('befread');
    //alert($befread);判断是否存储过
    if($befread == undefined){
        $('.pop_con').show(); /*弹出弹框*/
    }

    $('#user_read').click(function(){
        /*点击后存储cookie，隐藏*/
        $.cookie('befread','read',{expires:7,path:'/'});
        $('.pop_con').hide();
    })

})
</script>

.pop_con{
    display: none;
}
.pop1{

    width: 300px;
    height: 300px;
    border: 3px solid #000;
    background-color: #87CEF5;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 100;
}

.pop2{
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 98;
}
.close{
    font-size: 30px;
    text-decoration: none;
    color: red;
    float: right;

}
</style>

</head>

<body>

<!--<input type="button" value="点击" class="btn">-->
<div class="pop_con">
    <div class="pop1">
        亲！你点赞过了
        <a href="#" class="close" id="off">x</a>
        <a href="javascript:;" id="user_read">哟不错哦</a>
    </div>
    <div class="pop2"></div>
</div>
<h2>网站内容</h2>

</body>
</html>

jQuery一次弹框实例

jQuery一次弹框实例

相关阅读