问题在js中创建一个弹出框，不要再问

Question

我是一个问题，创建cookie不要问复选框，我想创建这种类型的弹出也cookie在网站这是我的html和js代码，请审查我的代码，请帮助我排序这个问题。

在这里输入图像描述enter image description here

Answer 1

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

Answer 2

所以我们将创建一个带有消息和按钮的弹出窗口，以及一个复选框，该复选框在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>