why bootstrap modal popup after reload instead of window load. what may be causes?

Question

I am setting Bootstrap modal window on every page with hidden scroll on background to grab visitor details for lead generation because we are getting enough traffic.

I am doing all coding with header.php using window on load popup for each time. Popup should be hide after click on close or submit options. and no more popup window on any page after click on close or submit at once.

i am using session to hide popup after close or submit click. this is working fine.

is session is safe ? whats other options ?

what kind of problem i am getting - popup occures after reload instead of window on load.

looks like cookies issue, header cache issue. i have no idea

after researching i have done window reload once . its give some variables in url

check here : https://www.carlo.in/new-cars-test

please suggest me some other options or provide me solutions.

Answer 1

Session will keep the modal from reappearing during the remainder of time the client has their browser open or until the session is expired/closed on the server side (short-term). A cookie will keep the modal from reappearing as long as the cookie is not deleted from their computer (long-term)

Here is how I would do it using a bootstrap modal and cookies:

1. Check if the cookie exists already.
2. If the cookie doesn't exist, run the modal.
3. Once the modal is acknowledged, store a cookie on the client's machine.

header.php

  # check if "Got-It!" button has been pressed
  if (isset($_POST['btn_modal'])) {
    $nameofCookie = $_POST['btn_modal'] . '-' . $_SERVER['REMOTE_ADDR']; // store name of modal with client's IP for the cookie's name
    $cookieExp = (86400 * 365); // time in seconds for cookie to expire
    # check if this cookie exists already
    if (!array_key_exists($nameofCookie, $_COOKIE)) {
      setcookie($name, '_any_value_goes_here_to_store_in_cookie', $cookieExp, '/'); // create cookie
      header('Location: https://' . $_SERVER['HTTP_HOST'] . URI); // refresh the current page after they click "Got It!"
      die();
    }
  }

I personally prefer to use the username if the user is logged in, but if not storing the username in a session, you can use their IP as how it's shown above. Here's with username, only one line is different.

  # check if "Got-It!" button has been pressed
  if (isset($_POST['btn_modal'])) {
    $nameofCookie = $_POST['btn_modal'] . '-' . $_SESSION['username']; // store name of modal with client's username for the cookie's name
    $cookieExp = (86400 * 365); // time in seconds for cookie to expire
    # check if this cookie exists already
    if (!array_key_exists($nameofCookie, $_COOKIE)) {
      setcookie($name, '_any_value_goes_here_to_store_in_cookie', $cookieExp, '/'); // create cookie
      header('Location: https://' . $_SERVER['HTTP_HOST'] . URI); // refresh the current page after they click "Got It!"
      die();
    }
  }

index.php (or whatever page the modal is going on)

<!-- code... -->

  <!-- begin: What's New? [Modal] -->
    <div class="modal fade" id="newModal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">What's new</h5>
          </div>
          <div class="modal-body">
            <ul>
              <li>NEW THIS</li>
              <li>NEW THAT</li>
              <li>NEW EVERYTHING</li>
            </ul>
          </div>
          <div class="modal-footer">
            <form method="post" action="<?=$_SERVER['REQUEST_URI'];?>">
              <button type="submit" class="btn btn-primary" name="btn_modal" value="newModal">Got It!</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  <!-- end: What's New? [Modal] -->

<!-- more code... ->

footer.php

  if(array_key_exists($nameofCookie, $_COOKIE)) {
    echo "<script>
            $(window).on('load',function(){
              $('#newModal').modal('show');
            });
          </script>";
  }

The script to set the cookie must be placed in the header, and it is best if the script to check and run the modal is placed anywhere after the html code for the modal, preferably the footer.