How to Add +1 to a cookie value on click of a button

问题

I really need your help and I know It is easy to you. I made the following code to show a modal bootstrap by loading every page of my website. but I need to show that modal just for 3 times to every user. so I need to count times the user click on the button to close modal. If the user 3 times has closed the modal, I do not want to show him the modal (popup) again. I want to do that by cookie but my code does not work and I use cookie plugin to use JQuery Bootstarp Modal.

Thanks you all to help me.

My HTML Code

<!-- Modal -->
        <div id="hereiakarneta" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" id="AcceptMyGiftClose" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="text-align: center;" >From Me To You</h4>
              </div>
              <div class="modal-body">

                <div class="hikmywords">
                    <img src="" class="img-responsive" alt="">
                    <ul>
                        <li><h5>my gift to you</h5></li>
                        <li>
                            <p>click on the button and download my gift</p>
                        </li>
                    </ul>
                </div>

              </div>
              <div class="modal-footer">
                <p><a>My Gift</a></p>
              </div>
            </div>
          </div>
        </div>  

My JQuery Code

jQuery(document).ready(function($) {
    var VisitPopupGift = $.cookie('AcceptMyGift');
    if ( !$.cookie('AcceptMyGift') ) {

        $('#hereiakarneta').modal({
            show: true,
            backdrop: 'static',
            keyboard: false, 
        })
        $("#AcceptMyGiftClose").click(function() {
            VisitPopupGift = 1;
            $.cookie('AcceptMyGiftOnce', VisitPopupGift, {
                expires: 30,
                path: '/',
            });
            $(".hereiakarneta").fadeOut('fast');
        });

    } else { 
        if ( VisitPopupGift < 5 ) {
        $('#hereiakarneta').modal({
            show: true,
            backdrop: 'static',
            keyboard: false, 
        })
        $("#AcceptMyGiftClose").on("click",function(){
            //VisitPopupGift++;
            VisitPopupGift++;
            $.cookie('AcceptMyGiftOnce', VisitPopupGift, {
                expires: 30,
                path: '/',
            });
            $(".hereiakarneta").fadeOut('fast');
        });
        }
    }
});

回答1:

Since I am not familiar with JQuery, what came to my mind is that, set a counter which counts for each click then set an if else statement, in the if statement, say if counter is less than or equal three, show the modal, else close it or hide it.

回答2:

Fortunately I found this answer and solved the question:
I want to use it in myou website : https://karneta.com/ but without using wordpress plugin :)

jQuery(document).ready(function($) {
    //set cookie
    var exp = $.cookie("exp");
    //set cookie 0 for first
    exp = (exp)?parseInt(exp,10):0;

    if ( exp <= 2 ) {
        $('#hereiakarneta').modal({
            show: true,
            backdrop: 'static',
            keyboard: false, 
        })
    } else if ( exp >= 3 ) {
        $(".dologinfirst").delay(2000).fadeIn(500);
        $("#menubutton").click(function(){
            $(".dologinfirst").hide();
        });
        $('body').click(function() {
            $(".dologinfirst").hide();
        });
    }

    //getting the value of cookie and assigning it to a variable
    $("#AcceptMyGiftClose").one("click",function(){ // use .on if you want every click to count
    exp++;
    //set the incremented value of CookieCount variable to the cookie
    $.cookie("exp",exp,{ expires: 30, path: '/' }); // expiry date 30 days

  });
});

来源：https://stackoverflow.com/questions/61693712/how-to-add-1-to-a-cookie-value-on-click-of-a-button