issue creating a popup and do not ask again check box in js

Question

I was an issue with creating cookies to do not ask checkboxI want to create this type popup also cookies in website here is my html and js code please reviews my code and please help me sort this problem.

enter image description here enter image description here

Answer 1

So we are going to create a popup with a message and buttons, and a checkbox which saves a setting in a cookie to prevent the popup in the future. Here it is. You won't be able to test it here because the cookies are blocked.

**** UPDATE

Open in external sandbox to see how the cookie works

// You need to save the message data somewhere so you can change it without touching the code. We are going to save it in an object but ideally should be in a database or external JSON file.
const popup_msg_data = {
  headline: "How to play",
  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis est, eleifend non felis id, blandit sodales quam. Nam tortor lorem, porta at enim id, aliquam eleifend lorem.",
  checkbox_text: "Don't show this again."
}

// Create variable with our cookie name
const cname = "message_popup_suppress_option_enabled";

// Handler for the checkbox
$("body").on("change", "#popup_suppress", function() {
  console.log("input changed");
  // Check if checkbox is checked.
  const checked = $(this).is(":checked");
  if (checked && !cookie_exists()) {
    // Set the cookie if not already there
    set_suppress_cookie();
  } else if (!checked) {
    // Delete the cookie if already exists
    document.cookie = cname + "; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }
});

// Check for the cookie
function cookie_exists() {
  // Get cookies into an array
  const dcookie = decodeURIComponent(document.cookie).split(';');
  // Check for our cookie
  return dcookie.includes(cname);
}

// Function to set cookie
function set_suppress_cookie() {
  // Create a date object one day into the future to expire our cookie
  const expires = new Date();
  const exp_days = 1;
  expires.setTime(expires.getTime() + (exp_days * 24 * 60 * 60 * 1000));
  // Create the cookie
  document.cookie = cname + ";expires=" + expires + ";path=/";
}

// This function toggles the popup
$("body").on("click", ".toggle-popup", function() {
  // Check for the template
  const template = $(".popup-template");
  // initialize a variable for the popup
  let popup = $(".popup-container");

  // Function to handle closing the popup
  function close_popup() {
    // Fade out the popup
    popup.fadeOut("fast", function() {
      // When done fading put the template back and remove the popup
      template.appendTo("body");
      $(this).remove();
    })
  }

  // If we have a template continue
  if (template.length) {
    // If popup is visible
    if (popup.is(":visible")) {
      close_popup();
    } else {

      // If our cookie is not present continue with the popup
      if (!cookie_exists()) {
        // If not visible create the basic HTML structure of the popup and insert the template
        popup = $("<div />", {
          class: "popup-container"
        }).append(
          $("<div />", {
            class: "popup-scroll"
          }).append(
            $("<div />", {
              class: "popup-overlay toggle-popup"
            }),
            $("<div />", {
              class: "popup-content"
            }).append(template)
          )
        );
        // Find all elements in template with data-id attribute and loop over them
        popup.find("[data-id]").each(function() {
          // Get the id
          const id = $(this).data("id");
          // Match the id from the element with the right key from our data object and insert text.
          $(this).text(popup_msg_data[id] || null);
        })
        // Append the popup to the dom and add active class
        popup.appendTo("body").hide(1, function() {
          $(this).fadeIn("fast", function() {
            $(this).removeClass("active").addClass("active");
          })
        });
      } else {
        console.log("Cookie detected");
      }
    } // End if visible
  } // End if template
})

* {
  box-sizing: border-box;
}

body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: slategray;
  font-size: 16px;
  line-height: 1.4em;
  font-family: sans-serif;
}

button.test-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: cyan;
  padding: 12px;
  color: black;
}

.popup-template {
  display: none;
}

.popup-container {
  display: flex;
  position: fixed;
  z-index: 95000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-scroll {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px 15px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: .8;
  cursor: pointer;
  z-index: 1;
}

.popup-content {
  position: relative;
  z-index: 10;
  margin: auto;
  opacity: 0;
  transform: translate(0, 100px);
  transition: opacity .4s, transform .4s ease-out;
}

.popup-container.active .popup-content {
  opacity: 1;
  transform: none;
}

.popup-content .popup-template {
  display: grid;
  grid-gap: 20px;
  background: black;
  color: GhostWhite;
  padding: 30px;
  position: relative;
  max-width: 800px;
}

.popup-hdr {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-gap: 20px;
  align-items: center;
  width: 100%;
}

.popup-hdr h2 {
  font-size: 1.4em;
  line-height: 1.3em;
  margin: 0;
  color: white;
}

.popup-info {
  font-size: .8em;
  line-height: 1em;
  text-align: right;
}

.popup-ftr {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr max-content;
}

.popup-check {
  display: flex;
  align-items: center;
  position: relative;
}

.popup-check input {
  display: none;
}

.popup-check label {
  cursor: pointer;
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  grid-gap: 10px;
  align-items: center;
}

.popup-check label:before {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 2px solid white;
  overflow: hidden;
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 600;
  color: SpringGreen;
  font-size: 14px;
  line-height: 1;
}

.popup-check input:checked+label:before {
  content: "\f00c";
}

.popup-btns {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
}

.popup-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px;
  min-width: 90px;
  min-height: 48px;
  border: 1px solid white;
  cursor: pointer;
}

.popup-btn:hover {
  background: white;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" />

<!-- This is the button that will trigger the popup. You may need to change this for your use case -->
<button class="test-btn toggle-popup">Click Here</button>

<!-- This is the template for the popup. Ideally this should be in an external file -->
<div class="popup popup-template">
  <div class="popup-hdr">
    <h2 data-id="headline"></h2>
    <div class="popup-info">5 of 6</div>
  </div>
  <div data-id="message" class="popup-text"></div>
  <div class="popup-ftr">
    <div class="popup-check">
      <input type="checkbox" id="popup_suppress" />
      <label for="popup_suppress" data-id="checkbox_text">
                Do not show again
            </label>
    </div>
    <div class="popup-btns">
      <div class="popup-btn toggle-popup">Close</div>
      <div class="popup-btn" data-action="back">Back</div>
      <div class="popup-btn" data-action="next">Next</div>
    </div>
  </div>
</div>

Answer 2

$("div[id^='myModal']").each(function(){

  var currentModal = $(this);

  //click next
  currentModal.find('.btn-next').click(function(){
    currentModal.modal('hide');
    currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal']").first().modal('show');
  });

  //click prev
  currentModal.find('.btn-prev').click(function(){
    currentModal.modal('hide');
    currentModal.closest("div[id^='myModal']").prevAll("div[id^='myModal']").first().modal('show');
  });

});



//do not show function

jQuery(document).ready(function($) {
  /*if ($.cookie("cacher-modal")) {
    $("#popupMaintenanceModal").remove();
  } else {
    $("#popupMaintenanceModal").modal("show");
  }*/

  $("#popupMaintenanceCheckbox").click(function() {
    if ($(this).is(":checked")) {
        $("#myModal1").hide();
        $(".modal-backdrop").hide();

        console.log("here");
        $.cookie("cacher-modal", true);

    } else {

      $.cookie("cacher-modal", false);

    }
  });

//checkbox for popup-cookies
  $('#showNextpop').click(function(){
    if ($.cookie("cacher-modal")) {
        //$("#popupMaintenanceModal").remove();
    } else {
        $("#myModal1").modal("show");
    }
  });

});


 $('#showNextpop1').click(function(){
    if ($.cookie("cacher-modal")) {
        //$("#popupMaintenanceModal").remove();
    } else {
        $("#myModal1").modal("show");
    }
 });
 $('#showNextpop2').click(function(){
    if ($.cookie("cacher-modal")) {
        //$("#popupMaintenanceModal").remove();
    } else {
        $("#myModal1").modal("show");
    }
 });
 $('#showNextpop3').click(function(){
    if ($.cookie("cacher-modal")) {
        //$("#popupMaintenanceModal").remove();
    } else {
        $("#myModal1").modal("show");
    }
 });




jQuery(document).ready(function($) {
  if ($.cookie("cacher-modal")) {
    $("#popupMaintenanceModal1").remove();
  } else {
    $("#popupMaintenanceModal1").modal("show");
  }

  $("#popupMaintenanceCheckbox1").click(function() {
    if ($(this).is(":checked")) {
        $("#myModal2").hide();
        $(".modal-backdrop").hide();

        console.log("here");
        $.cookie("cacher-modal", true);
    } else {

      $.cookie("cacher-modal", false);
    }
  })
});

jQuery(document).ready(function($) {
  if ($.cookie("cacher-modal")) {
    $("#popupMaintenanceModal2").remove();
  } else {
    $("#popupMaintenanceModal2").modal("show");
  }

  $("#popupMaintenanceCheckbox2").click(function() {
    if ($(this).is(":checked")) {
        $("#myModal3").hide();
        $(".modal-backdrop").hide();

        console.log("here");
        $.cookie("cacher-modal", true);
    } else {

      $.cookie("cacher-modal", false);
    }
  })
});

jQuery(document).ready(function($) {
  if ($.cookie("cacher-modal")) {
    $("#popupMaintenanceModal3").remove();
  } else {
    $("#popupMaintenanceModal3").modal("show");
  }

  $("#popupMaintenanceCheckbox3").click(function() {
    if ($(this).is(":checked")) {
        $("#myModal4").hide();
        $(".modal-backdrop").hide();

        console.log("here");
        $.cookie("cacher-modal", true);
    } else {

      $.cookie("cacher-modal", false);
    }
  })
});

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="top:120px;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Modal title 1</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex  justify-content-start custom-control custom-checkbox1">
                            <input id="popupMaintenanceCheckbox" for="popupMaintenanceCheckbox" type="checkbox" name="coupon_question"  />
                             <span class="item-text">Don't show me again</span>
                        </div>

                        <button type="button" class="btn btn-default btn-next">Next</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Button trigger modal -->

        <!-- Modal -->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="top:120px;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Modal title 2</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex  justify-content-start custom-control custom-checkbox2">
                         <input id="popupMaintenanceCheckbox1" for="popupMaintenanceCheckbox1" type="checkbox" name="coupon_question"  />
                             <span class="item-text">Don't show me again</span>

                        </div>
                        <button type="button" class="btn btn-default btn-prev">Prev</button>
                        <button type="button" class="btn btn-default btn-next">Next</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Button trigger modal -->

        <!-- Modal -->
        <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="top:120px;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Modal title 3</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex  justify-content-start custom-control custom-checkbox2">
                            <input id="popupMaintenanceCheckbox2" for="popupMaintenanceCheckbox2" type="checkbox" name="coupon_question"  />
                             <span class="item-text">Don't show me again</span>
                        </div>
                        <button type="button" class="btn btn-default btn-prev">Prev</button>
                        <button type="button" class="btn btn-default btn-next">Next</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Button trigger modal -->

        <!-- Modal -->
        <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" style="top:120px;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Modal title 4</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>

                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex  justify-content-start custom-control custom-checkbox1">
                            <input id="popupMaintenanceCheckbox3" for="popupMaintenanceCheckbox3" type="checkbox" name="coupon_question"  />
                             <span class="item-text">Don't show me again</span>
                        </div>
                        <button type="button" class="btn btn-default btn-prev">Prev</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>