Popup kod yardım

01-03-2024, 16:01:57

Merhaba aşağıda ki popup kodunu sayfa her yenilendiğinde açılması yerine belirli bir süre tanımlayabiliyor muyuz? Bugün bir kere açıldığında belli bir süre boyunca açılmasın.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Yazılım Bilişim</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    </head>
 
    <body>    
       <div id="uyari" title="YazilimBilisim.net" style="display:none;">
            <p>
            Bu dialog kutusu sayfanın açılışında kullanıcılara gösterilmekteidr.
            </p>
            <img src="https://source.unsplash.com/random" width="100%">
        </div>
                 
        <!-- Script -->
         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
       
        <script>
            $(function(){
                // sayfa açılışında dialog kutusunun gelmesi için her hangi bir buton için yerleştirmedik
                $("#uyari").dialog({
                    width:600, //dialog kutusunun genişliği
                    modal:true, //arkaplanın koyu olması
                    autoOpen:true, //gerek yok ama otomatik açılması için
                    position:  { my: "center top", at: "center top" } //konum
                });
            })
            
        </script>
    </body>
</html>

01-03-2024, 16:25:04

mebularts

Evet tarayıcı çerezlerini kullanarak yapabilirsiniz

Örnek JS kodu:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">        
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yazılım Bilişim</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>

<body>    
   <div id="uyari" title="YazilimBilisim.net" style="display:none;">
        <p>
        Bu dialog kutusu sayfanın açılışında kullanıcılara gösterilmekteidr.
        </p>
        <img src="https://source.unsplash.com/random" width="100%">
    </div>
              
    <!-- Script -->
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    
    <script>
        $(function(){
            // Cookie kontrolü yap
            var cookieName = 'popupShown';
            var cookieValue = getCookie(cookieName);

            if (!cookieValue) {
                // Eğer cookie yoksa popup'ı göster
                $("#uyari").dialog({
                    width:600, //dialog kutusunun genişliği
                    modal:true, //arkaplanın koyu olması
                    autoOpen:true, //gerek yok ama otomatik açılması için
                    position:  { my: "center top", at: "center top" }, //konum
                    close: function() {
                        // Popup kapatıldığında cookie'yi ayarla (1 gün süreyle)
                        setCookie(cookieName, 'true', 1);
                    }
                });
            }
        });

        // Cookie ayarlamak için yardımcı fonksiyon
        function setCookie(cookieName, cookieValue, expirationDays) {
            var d = new Date();
            d.setTime(d.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
        }

        // Cookie almak için yardımcı fonksiyon
        function getCookie(cookieName) {
            var name = cookieName + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for(var i = 0; i <ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }
    </script>
</body>
</html>