在 js 中创建弹出窗口并且不再询问复选框时出现问题
issue creating a popup and do not ask again check box in js
我在创建不询问复选框的 cookie 时遇到了问题I 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
所以我们将创建一个带有消息和按钮的弹出窗口，以及一个将设置保存在 cookie 中以防止将来弹出的复选框。这里是。您将无法在此处进行测试，因为 cookie 已被阻止。
**** 更新
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>
$("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">×</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">×</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">×</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">×</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>
我在创建不询问复选框的 cookie 时遇到了问题I 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
所以我们将创建一个带有消息和按钮的弹出窗口，以及一个将设置保存在 cookie 中以防止将来弹出的复选框。这里是。您将无法在此处进行测试，因为 cookie 已被阻止。
**** 更新
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>
$("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">×</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">×</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">×</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">×</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>