-2

我在创建 cookie 以不询问复选框时遇到问题我想在网站中创建这种类型的弹出窗口还有 cookie 这是我的 html 和 js 代码请查看我的代码并请帮我解决这个问题。

在此处输入图像描述 enter image description here

4

2 回答 2

0 

$("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>

于 2021-03-02T10:05:44.640 回答
-1

因此，我们将创建一个带有消息和按钮的弹出窗口，以及一个将设置保存在 cookie 中以防止将来弹出的复选框。这里是。您将无法在此处对其进行测试，因为 cookie 已被阻止。

**** 更新

在外部沙箱中打开以查看 cookie 的工作原理

// 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>

于 2021-02-27T21:53:51.793 回答