码迷,mamicode.com
首页 > Web开发 > 详细

jQuery一次弹框实例

时间:2019-01-13 22:48:54      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:code   ges   set   undefined   path   size   process   UNC   -o   

服务器环境下:

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

<style type="text/css">

.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>
<h1>网站内容</h1>

</body>
</html>

技术分享图片

jQuery一次弹框实例

标签:code   ges   set   undefined   path   size   process   UNC   -o   

原文地址:http://blog.51cto.com/13742773/2342264

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!