Load a Pop Up only once to the User

Question

Load a Pop Up only once to the User

Navigation

#1 by (-1 votes)

0

I'm trying to make the Pop Up only go out once to the user and I try to do it by going to save a cookie but I'm not managing to save it, Help Please ...

<!DOCTYPE html> <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Prueba</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script async src="//jsfiddle.net/Guruprasad_Rao/TWB68/131/embed/"></script>
    </head>
    <body>
        <button id="delCookie">DELETE COOKIE</button>
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div id="myModal" class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Title</h4>
                    </div>
                    <div class="modal-body">
                        <p>Cuerpo del Pop Up!</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
        <script>
            $(document).ready(function () {
                $("#delCookie").click(function(){
                    del_cookie("cookie");   
                });

                console.log(document.cookie);
                var visit = getCookie("cookie");
                if (visit == null) {
                    $("#myModal").modal("show");
                    var expire = new Date();
                    expire = new Date(expire.getTime() + 7776000000);
                    document.visitante = "cookie=here; expires=" + expire;
                }
            });

            function del_cookie(name)
            {
                document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
            }

            function getCookie(c_name) {
                var c_value = document.cookie;
                var c_start = c_value.indexOf(" " + c_name + "=");
                if (c_start == -1) {
                    c_start = c_value.indexOf(c_name + "=");
                }
                if (c_start == -1) {
                    c_value = null;
                } else {
                    c_start = c_value.indexOf("=", c_start) + 1;
                    var c_end = c_value.indexOf(";", c_start);
                    if (c_end == -1) {
                        c_end = c_value.length;
                    }
                    c_value = unescape(c_value.substring(c_start, c_end));
                }
                return c_value;
            }
        </script>
    </body> </html>

javascript jquery html5 cookies

asked by Carlos Vargas 06.09.2017 в 01:39

source

1 answer

Close form in c # extract element to arraylist and pass it to string

score -1 · Answer 1

Try this code just change your message and insert your html code I have it currently working I tested it with Chrome and use a coorkie manager I am using Cookie Manager so you delete the cookies and you delete it for testing and you will see the expiration date.

<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<!-- OUR PopupBox DIV-->
<div id="aviso_off" style='display:none; z-index:99999; position:fixed; top:0px;left:0px; overflow:visible; height:100%; width:100%; background: rgba(255,255,255,.7);'>
<div id="aviso_on" style='z-index:999999; position:fixed; overflow:visible; top:50%; left:40%; width:600px; margin-top:-160px; margin-left:-160px; background:#ffffff; color:#000000; font-size:15px; border-radius:12px; padding:15px; box-sizing:border-box; text-align:center; border:5px #ff0000; box-shadow:0 0 5px #ff0000;'>
<a href="javascript:void(0);" style="float:right;padding:0 6px;box-sizing:border-box;background:#333;text-decoration:none;color:#fff;border-radius:5px;" onclick="document.getElementById('aviso_off').style.display='none';">X</a>
<h1>hola mundo popmsj</h1>hola hola hola</div></div>
<!-- Gestion cookies -->
<script type='text/javascript'>
// Grabar
function setCookie(name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
    ((path == null) ? "" : "; path=" + path) +((domain == null) ? "" : "; domain=" + domain) +
    ((secure == null) ? "" : "; secure");
}
// Leer
function getCookie(name){
    var cname = name + "=";
    var dc = document.cookie;
    if (dc.length > 0) {
        begin = dc.indexOf(cname);
        if (begin != -1) {
            begin += cname.length;
            end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
                return unescape(dc.substring(begin, end));
            }
        }
    return null;
}
//Borrar
function delCookie (name,path,domain) {
    if (getCookie(name)) {
        document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) +
        ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
    }
</script>
<script type='text/javascript'>
var comprobar = getCookie("avisooff1");
if (comprobar != null) {}
else {
    var expiration = new Date();
    expiration.setTime(expiration.getTime() + (60000*60*24*1));
    setCookie("avisooff1","1",expiration);
    document.getElementById("aviso_off").style.display="block";}
</script>
hola mundo trasero
</body></html>