Cách hiển thị popup theo cookie

 Hỗ trợ lập trình NukeViet

Em chào anh,
E có sử dụng hướng dẫn tạo popup của a tại https://mynukeviet.net/javascript-jquery/lightbox-popup-don-gian-su-dung-jquery-va-bootstrap-129.html
Giờ em muốn dùng cookie để popup chỉ hiển thị 1 lần trong vòng thời gian nhất nhất định nào đó, vậy nhờ a hướng dẫn giúp em được không ạ?
Em cảm ơn anh!


Có thể dùng cookie của jquery nhé.

    setTimeout(function() {
        $('.dark-bg').fadeIn('300', function() {
            $('.intro-bg').slideDown('400');
        });
    }, 1000);

Đoạn này sẽ luôn hiện popup khi xem trang, sửa lại xí để nó kiểm tra cookie

if (!$.cookie("popup-opened")) {
    setTimeout(function() {
        $('.dark-bg').fadeIn('300', function() {
            $('.intro-bg').slideDown('400');
            $.cookie("popup-opened", 1, { expires : 30 });
        });
    }, 1000);
    }

Em sửa thành

        <script type="text/javascript">
                $(document).ready(function($) {
                    if { ($.cookie('popup-opened') == undefined){
                    setTimeout(function() {
                        $('.dark-bg').fadeIn('300', function() {
                            $('.intro-bg').slideDown('400');
                            $.cookie("popup-opened", 1, { expires : 30 });
                        });
                    }, 1000);
            $('.closePopUp').click(function(event) {
                $('.intro-bg').slideUp('300', function() {
                    $(this).remove();
                    $('.dark-bg').fadeOut('400', function() {
                        $(this).remove();
                    });
                });
            });
        }); 

    </script>
Theo ý em là mặc định popup luôn ẩn, đầu tiên ta kiểm tra xem cookie popup-opened có tồn tại hay không, nếu không tồn tại thì trả về giá trị undefine và cho hiện popup và khởi tạo cookie này với giá trị là 1. Nếu có tồn tại thì ta bỏ qua, nghĩa là popup mặc định không hiện. 

Trong đoạn trên có đoạn setTimeout của function để xét tgian xuất hiện của function này

setTimeout(function() {
                        $('.dark-bg').fadeIn('300', function() {
                            $('.intro-bg').slideDown('400');
                            $.cookie("popup-opened", 1, { expires : 30 });
                        });
                    }, 1000);

Nhưng e không hiểu đoạn a viết lắm và hình như em viết sai điều kiện hiển thị function nên popup không hiện. A sửa và giải thích thêm hộ em với ạ/.


if (!$.cookie("popup-opened")) {
    setTimeout(function() {
        $('.dark-bg').fadeIn('300', function() {
            $('.intro-bg').slideDown('400');
            $.cookie("popup-opened", 1, { expires : 30 });
        });
    }, 1000);
    }

Em chèn đoạn trên của a vào mà popup không hiện hix


Ôi quên, chèn thêm thư viện Jquery cookie nữa chứ https://github.com/carhartl/jquery-cookie
Code trên do thiếu thư viện Jquery cookie này nên cookie nó không chạy

<script src="jquery.cookie.js"></script>

Em thấy trong asset/js/jquery có thư viện jquery.cookie.j rồi em tưởng Nukeviet gọi sẵn ra nên ko gọi nữa. Xong hqua em cũng thử gọi ra rồi thì popup n chạy, nhưng không lấy được cookie mà vẫn cứ chạy popup mãi a ạ.


Thử trên Firefox thử, nghe đâu chrome bị lỗi mà mình chưa test được.


Firefox cũng không được anh ạ. A xem em làm đã đúng chưa ạ
Em thêm đoạn này vào footer_only.tpl

<script src="/assets/js/jquery/jquery.cookie.js"></script>

Sau đó e thêm đoạn này vào footer.extended.tpl

    <div id="fanback" >
        <div class="dark-bg fan-exit"></div>
            <div class="row intro-bg">
                <div class="col-md-24">
                    <div id="it-intro">
                        <div class="it-test-panel">
                            <i class="fa fa-times-circle closePopUp"></i><h3>LANG.dangky</h3>
                            <p class="subheading">
                            LANG.info_content
                            </p>
                            <div class="col-md-12">
                                [DANGKY_POPUP]
                            </div>
                            <div class="col-md-12">
                                [QUANGCAO_POPUP]
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
        <script type="text/javascript">
                $(document).ready(function($) {
                if (!$.cookie("popup-opened")) {
                setTimeout(function() {
                    $('.dark-bg').fadeIn('300', function() {
                        $('.intro-bg').slideDown('400');
                        $.cookie("popup-opened", 1, { expires : 30 });
                    });
                }, 1000);
                }
            $('.closePopUp').click(function(event) {
                $('.intro-bg').slideUp('300', function() {
                    $(this).remove();
                    $('.dark-bg').fadeOut('400', function() {
                        $(this).remove();
                    });
                });
            });
        }); 
    </script>

Chèn thế đúng rồi, nhưng mình mới test lại, cái Jquery cookiei này có có vấn đề trên chrome, không họat động.
Thử dùng Javascript Cookie xem sao nhé http://www.w3schools.com/js/js_cookies.asp


A có thể hướng dẫn em dùng thư viện này ko ạ. E đọc không hiểu gì hix.
Ở đây n có thể lấy cookie theo phiên, nghĩa là đóng trình duyệt thì cookie bị xóa phải không ạ. A hướng dẫn em theo cách này đi ạ/


Từ trước giờ bạn đề cập đến cookie (1), cookie không mất khi tắt trình duyệt nhé. cookie sống theo thời gian khi khởi tạo. Còn đóng trình duyệt mất thì dùng Seesion (2)
Ý của bạn là 1 hay 2?


E nhầm, ý em là cái cookie tạo ra sẽ bị hết hạn ấy ạ.
E muốn khi tắt trình duyệt đi thì vào trang web popup lại hiện ra. Nghĩa là sau mỗi phiên làm việc thì popup mới hiện ra 1 lần ấy anh. A xem giúp em cách nào trong cookie hay seesion hợp lý và nhanh hơn cũng được ạ.
Sr a vì em không hiểu lắm vè cái này với giờ em mới onl được.

Bạn cần đăng nhập để tham gia thảo luận

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC