jQuery一次弹框实例

我们提供的服务有：成都网站制作、成都网站设计、微信公众号开发、网站优化、网站认证、公安ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的公安网站制作公司

<!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一次弹框实例
本文链接：https://www.cdcxhl.com/article22/ghiejc.html

成都网站建设公司_创新互联，为您提供网站策划、虚拟主机、小程序开发、定制开发、网站营销、用户体验

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容