Pregunta

am trying to do that using javascript i want to show HTML page in shadow box ONLY ONE TIME when visit the site using cookies how i can do that ? HTML page ready but i want to know how to show it in shadow box using javascript ONE time when the user visit the site ??

if you can help me to show html page in shadow box only that great

<!DOCTYPE html>
<html>
<head>
<style>
#ShadowBox {
    width: 100px;
    height: 100px;
    display: block;
    background-color: blue;
    display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
// function for clearing the cookkie
$("#ClearCookie").click(function(){
    ClearCookie('visited');
});


//function for settinf the cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

//function for reading cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}
//For Setting the Cookie, you can call this onload or at the displaying of the shadowbox.
function MarkVisited() {
    setCookie("visited", "visited", 10)
}

function ClearCookie(cname) {
    setCookie("visited", "", 1)
}


//Put this in the document ready section. so it runs at onload
$( document ).ready(function() {
if (getCookie('visited') == "") {
    $('#ShadowBox').show();
}
MarkVisited();
});
// On Load Section End
</script>
</head>

<body>
<div id="ShadowBox">
</div>
<button id="ClearCookie">Clear Cookie</button>
</body>
</html>
¿Fue útil?

Solución

You can set a cookie when shadow box is displayed

Here is fiddle i have worked on http://jsfiddle.net/gd7Xz/ Working Fiddle of your Code http://jsfiddle.net/G3XAb/

Hope this Helps you, Please tick the Answer

    <!DOCTYPE html>
<html>

    <head>
        <style>
            #ShadowBox {
                width: 100px;
                height: 100px;
                display: block;
                background-color: blue;
                display:none;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            //function for settinf the cookie
            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toGMTString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            }

            //function for reading cookie
            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
                }
                return "";
            }
            //For Setting the Cookie, you can call this onload or at the displaying of the shadowbox.
            function MarkVisited() {
                setCookie("visited", "visited", 10)
            }

            function ClearCookie(cname) {
                setCookie(cname, "", 1)
            }


            //Put this in the document ready section. so it runs at onload
            $(document).ready(function() {
                if (getCookie('visited') == "") {
                    $('#ShadowBox').show();
                }
                MarkVisited();
            });
            // On Load Section End
        </script>
    </head>

    <body>
        <div id="ShadowBox"></div>
        <button id="ClearCookie" onClick="ClearCookie('visited')">Clear Cookie</button>
    </body>

</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top