We Keep Coding

Data in Django for loop {% for %} not loading for Modal

I am trying to display information from a django for loop in the HTML. The HTML is as follows:
<div class="row">
{% for product in page.object_list %}
<div class="col-lg-3">
<img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
<div class="box-element product">
<h6><strong>{{product.name}}</strong></h6>
<hr>
<a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a>
<div id="mySizeChartModal" class="ebcf_modal">
<div class="ebcf_modal-content">
<span class="ebcf_close">×</span>
<p>{{product.name}} FROM {{product.store}} £{{product.price}}</p>
</div>
</div>
<button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
<h4 style="display: inline-block; float: right"><strong>£{{product.price}}</strong></h4>
</div>
</div>
{% endfor %}
</div>
This works for loading the products in a grid but when clicking on <a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a> only the data for the first product is displayed. I am not sure why this is. In addtition to this, I have used JavaScript to display the Modal as a popup:
$(".button").click(function() {
$("#mySizeChartModal").show();
});
$("#mySizeChartModal .ebcf_close").click(function() {
$("#mySizeChartModal").hide();
});
The CSS is as follows:
/**---------------------*/
/* Popup box BEGIN */
/* The Modal (background) */
.ebcf_modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.ebcf_modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 65%;
}
/* The Close Button */
.ebcf_close {
color: #aaaaaa;
float: right;
}
.ebcf_close:hover,
.ebcf_close:focus {
color: #000;
cursor: pointer;
}
Any ideas on how I can get the data to load for each product when I click on the Modal pop up?

You have same ids for your modal box that's why only first one works . Instead you can make them unique using id="mySizeChart_{{product.id}}" same for modal-box i.e : id="mySizeChartModal_{{product.id}}" .Then , inside your jquery code simply use $(this).attr("id").split("_")[1] to get id and show only relevant modal.
Demo Code :
$(".button").click(function() {
var id = $(this).attr("id").split("_")[1]
$(`#mySizeChartModal_${id}`).show();
});
$(".ebcf_close").click(function() {
$(".ebcf_modal").hide();
});
.ebcf_modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.ebcf_modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 65%;
}
/* The Close Button */
.ebcf_close {
color: #aaaaaa;
float: right;
}
.ebcf_close:hover,
.ebcf_close:focus {
color: #000;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
<div class="box-element product">
<h6><strong>Abc</strong></h6>
<hr>
<!--add id="mySizeChart_{{product.id}}"-->
<a id="mySizeChart_1" class="button" style="vertical-align:middle"><span>Prices</span></a>
<!--add id="mySizeChartModal_{{product.id}}"-->
<div id="mySizeChartModal_1" class="ebcf_modal">
<div class="ebcf_modal-content">
<span class="ebcf_close">×</span>
<p>Abc FROMxyz £23</p>
</div>
</div>
<button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
<h4 style="display: inline-block; float: right"><strong>£23</strong></h4>
</div>
</div>
<div class="col-lg-3">
<img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
<div class="box-element product">
<h6><strong>Abc2</strong></h6>
<hr>
<a id="mySizeChart_2" class="button" style="vertical-align:middle"><span>Prices</span></a>
<div id="mySizeChartModal_2" class="ebcf_modal">
<div class="ebcf_modal-content">
<span class="ebcf_close">×</span>
<p>Abc2 FROMxyz £232</p>
</div>
</div>
<button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
<h4 style="display: inline-block; float: right"><strong>£232</strong></h4>
</div>
</div>
</div>

Data Toggle on Link not Opening Modal

I have been struggling for the last several days with Modals for a project at work. The trigger is a link (with a glyphicon to let the user know it's a table) and I am trying to use data toggle on the link to open a modal containing a table. I can't figure out why it's not working.
The Trigger:
<a data-toggle="modal" href="#tableA">
<span id="tableA_icon" class="glyph-wrap">
<span class="glyphicon glyphicon-th-list"></span>
</span>Table A
</a>
The Modal:
<div class="modal fade" id="tableA" tabindex="-1" role="dialog" link:aria-labelledby="tableA" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Table A</h3>
</div>
<div class="modal-body">
Table code goes here (the table does display properly when using another method)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
(Yes, my supervisor wants the modal to be printable (which I know will be another long pain in the neck), but right now I'm just focused on trying to get the darned Modal to open. I think I'm missing CSS on the footer buttons but that shouldn't be preventing the modal from opening, right?)
The CSS:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #333;
margin: auto;
padding: 0;
border: 1px solid #EEE;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
/*Modal Header*/
.modal-header {
padding: 2px 16px;
background-color: #EEE;
color: white;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Body */
.Modal-body {padding: 2px 16px;}
/* Modal Footer */
.Modal-footer {
padding: 2px 16px;
background-color: #EEE;
color: white;
}
/*The Footer Print Button*/
.print-btn{
color: #aaa;
/*float: right;*/
display: inline-block;
font-size: 28px;
font-weight: bold;
}
.print-btn:hover,
.print-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* The Footer Close Button */
.close-btn {
color: #aaa;
/*float: right;*/
display: inline;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
What am I doing wrong?

Use this for a tag and include all css in header and js in footer It works..!

Your mistake seems to be that you're not including Bootstrap in your code. When you do include it, it appears to work fine:
https://jsfiddle.net/9ugo7cvw/1/
To include it, as per the Bootstrap docs add this to your HTML:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I think the mistake you're making is assuming that data-toggle as an attribute actually has a function. This is not the case as data-toggle, as far as I'm aware, is not part of HTML5 and is something that is added by Bootstrap. Without Bootstrap installed, data-toggle="modal" is simply a key-value pair where data-toggle is the key and modal is the value.
In case you're not too familiar with JSFiddle, Bootstrap and its dependencies are imported in the Resources tab on the left side of the page.

Without viewing your JS code there's not really much for me to go off of. But if you just want your modal to display, you should give your span an id attribute or something to identify it. I moved your text "Table A" inside of the span tag instead of outside of it and gave it an id attribute. Then I added JavaScript to open the modal upon clicking the text. This is just one way to get your modal only to display.
JSfiddle: https://jsfiddle.net/5gx62bjw/2/
Another way is that you need to included the correct script tags in order for your modal to function correctly:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
https://jsfiddle.net/5gx62bjw/3/
Hopefully this helps you get on the right track

HTML/CSS/JS - Overlay backgrounds for modal popups - Issues with

I'm trying to add a semi-opaque overlay to my page that supports multiple modal popups.
The three popup boxes open OK without the need for Javascript, and, with the help of some Javascript, they close by mouse-clicking outside the popups.
Unfortunately, I can't get my overlay to work, without blocking the 'open-modal' buttons. I've tried wrapping the entire 'overlay' div around all the popup boxes, and I've tried keeping the popups outside of the overlay div.
Is there a way to fix this without blocking access to the buttons, and without messing up the 'external close' feature as facilitated by the Javascript?
Three files are attached: ‘.index.html’, ‘style.css’, and ‘modal-script.js’.
Apologies if my terminology is sometimes ‘homespun’, but I’m just and enthusiast doing the best I can.
My code so far is below in this same document. I would be grateful for any suggestions.
HTML CODE:
~ Main Document
CSS (STYLESHEET):
~ Modal Environment
JAVASCRIPT:
~ External Close of Popup Boxes
// JAVASCRIPT FILE: js/modal-script.js
// Closes multi-modals in an HTML page
// SET VARIABLES:
var boxArray = ['box1','box2','box3'];
// LISTEN FOR WINDOW EVENT
window.addEventListener('mouseup', function(event){
// LOOP...
for(var i = 0; i < boxArray.length; i++) {
var box = document.getElementById(boxArray[i]);
// IF...
if(event.target != box && event.target.parentNode != box){
// THEN...
box.style.display = 'none';
} // END IF/THEN STATEMENT
} // END LOOP
}); // END EVENT
/* STYLESHEET FOR MODAL ENVIRONMENT */
/* Pesets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a:link, a:visited {
text-decoration: none;
}
p {
margin-top: 0;
}
body {
font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
}
/* MODAL ENVIRONMENT */
.modal { /* Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)' */
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 10;
display: none;
}
.modal-content { /* Framework and default settings for popup boxes */
position: absolute;
background: #e2e2e2;
width: 80%;
height: 60%;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%, -50%);
border-radius: 1em;
display: none;
}
.modal:target { /* Where '.modal' is the target, make it visible */
display: block;
}
.modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
display: block;
}
/* MY POPUP BOXES */
#box1 {
}
#box2 {
}
#box3 {
}
/* Formatting: */
.button {
width: 250px;
height: 30px;
}
.type_1-button {
width: 250px;
height: 30px;
font-size: 0.9em;
font-weight: normal;
color: #000;
margin: 20px;
}
.type_1-button:hover {
background: dodgerblue;
font-size: 1em;
font-weight: bold;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-modal</title>
<script src="modal-script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--Button controls to trigger pop-up boxes-->
<button onclick="document.getElementById('box1').style.display = 'block'" class="type_1-button">Open Box 1</button>
<button onclick="document.getElementById('box2').style.display = 'block'" class="type_1-button">Open Box 2</button>
<button onclick="document.getElementById('box3').style.display = 'block'" class="type_1-button">Open Box 3</button>
<!--MODAL CODE-->
<div id="overlay" class="modal"> <!--Create modal window/environment/background-->
<!--PROBLEM HERE... WHAT TO DO???-->
</div> <!--End 'overlay' div and 'modal' class-->
<!--myBoxes: box1-->
<div id="box1" class="modal-content">
<h2>Pop-out Interface - Box1</h2>
</div> <!--End 'box1'-->
<!--myBoxes: box2-->
<div id="box2" class="modal-content">
<h2>Pop-out Interface - Box2</h2>
</div> <!--End 'box2'-->
<!--myBoxes: box3-->
<div id="box3" class="modal-content">
<h2>Pop-out Interface - Box3</h2>
</div> <!--End 'box3'-->
<!--END MODAL CODE-->
</body>
</html>

Add z-index:11 to .modal-content class and remove display:none from .modal class or add display:block to .modal class when clicking button.
If you want to access 3 buttons also when modal popup is appear add z-index: 11; position: relative; in .type_1-button class.

Add z-index:-1; to .modal and change some javascript as below
// JAVASCRIPT FILE: js/modal-script.js
// Closes multi-modals in an HTML page
// SET VARIABLES:
var boxArray = ['box1','box2','box3'];
// LISTEN FOR WINDOW EVENT
window.addEventListener('mouseup', function(event){
// LOOP...
for(var i = 0; i < boxArray.length; i++) {
var box = document.getElementById(boxArray[i]);
// IF...
if(event.target != box && event.target.parentNode != box){
// THEN...
debugger;
box.style.display = 'none';
} // END IF/THEN STATEMENT
} // END LOOP
}); // END EVENT
document.getElementById("overlay").addEventListener("click", function(event){
document.getElementById('overlay').style.display = 'none';
});
/*STYLESHEET FOR MODAL ENVIRONMENT*/
/*Pesets*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a:link, a:visited {
text-decoration: none;
}
p {
margin-top: 0;
}
body {
font-family: 'Halvetica'; Arial, sans-serif; /* Default font family */
}
/*MODAL ENVIRONMENT*/
.modal { /*Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)'*/
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 10;
display: none;
}
.modal-content{ /*Framework and default settings for popup boxes*/
position: absolute;
background: #e2e2e2;
width: 80%;
height: 60%;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%,-50%);
border-radius: 1em;
display: none;
}
.modal:target { /* Where '.modal' is the target, make it visible */
display: block;
}
.modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
display: block;
}
/*MY POPUP BOXES*/
#box1 {
}
#box2 {
}
#box3 {
}
// Formatting:
.button {
width: 250px;
height: 30px;
}
.type_1-button {
width: 250px;
height: 30px;
font-size: 0.9em
font-weight: normal;
color: #000;
margin: 20px;
}
.type_1-button:hover {
background: dodgerblue;
font-size: 1em;
font-weight: bold;
color: #fff;
}
.modal{
z-index:-1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-modal</title>
<script src="modal-script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--Button controls to trigger pop-up boxes-->
<button onclick="document.getElementById('box1').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
class="type_1-button">Open Box 1</button>
<button onclick="document.getElementById('box2').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
class="type_1-button">Open Box 2</button>
<button onclick="document.getElementById('box3').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
class="type_1-button">Open Box 3</button>
<!--MODAL CODE-->
<div id="overlay" class="modal"> <!--Create modal window/environment/background-->
<!--PROBLEM HERE... WHAT TO DO???-->
</div> <!--End 'overlay' div and 'modal' class-->
<!--myBoxes: box1-->
<div id="box1" class="modal-content">
<h2>Pop-out Interface - Box1</h2>
</div> <!--End 'box1'-->
<!--myBoxes: box2-->
<div id="box2" class="modal-content">
<h2>Pop-out Interface - Box2</h2>
</div> <!--End 'box2'-->
<!--myBoxes: box3-->
<div id="box3" class="modal-content">
<h2>Pop-out Interface - Box3</h2>
</div> <!--End 'box3'-->
<!--END MODAL CODE-->
</body>
</html>

Thanks for your feedback, people. I wasn't happy with my own solution, so I took it back to the 'drawing board' with all of your valuable comments in mind.
My code now produces a set of three interchangeable modals with two options for closing - press the 'X' symbol or mouse click the background. I will be looking for the third option of closing by [Esc.] key later. Pleas let me know if you have any recommended methods for closing with the escape key.
The overlay window opens and closes at the right moments without interfering with other elements. I hope this make a worthwhile exemplar for anyone looking for modal solutions.
The code is about to follow.
Thank you all,
Adrian McG
// MODAL CODE
// Open and close multiple modal boxes
// Project Title: Muli-modals */
// GET MODAL-OPEN BUTTONS
var modalBtns = document.querySelectorAll(".modal-open"); // Get 'ALL' buttons with the '.modal-open' class
// Make a forLoop to work for 'each' individual modal button...
modalBtns.forEach(function(btn) { // Create a function called "btn" to work in a forLoop for each one that equals 'modalBtns'
btn.onclick = function() { // On mouse-click, activate the 'btn' function and let it do the following...
var modal = btn.getAttribute("data-modal"); // Declare and set a variable called 'modal' to have the same attribute...
//as any element that has the property of 'data-modal' (attached to the modal buttons)
document.getElementById(modal).style.display = "block"; // ...then get the 'modal' document, stored in 'data-modal',
//and set its display style attribute to "block", which will display all elements with the '.modal' class
}; // End function
}); // End forLoop
// CLOSE MODALS: Method 1 - Close by button click
// Get all butons with the '.modal-close' class
var closeBtns = document.querySelectorAll(".modal-close");
closeBtns.forEach(function(btn) { // Create a function called "btn" to work in a forLoop
btn.onclick = function() { // On mouse-click, activate the 'btn' function and let it do the following...
var modal = btn.closest(".modal").style.display = "none"; // ...then get the 'modal' document, and set its display style
// attribute to "none", which will make all elements with the '.modal' class invisible
} // End function
}) // End forLoop and function
// CLOSE MODALS: Method 2 - Close by external click on the overllay window
window.onclick = function(e) { // Creat a function named 'e' (for event) to work on mouse-click event
if(e.target.className === "modal") { // If the target of the mouse-click event is strictly equivalent to the class 'modal'...
e.target.style.display = "none"; // ...then get set the targeted element to 'none'; or, in other words, make the
// modal invisible
} // End if/then statement
} // End function
/* Default CSS */
/* PRESETS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
}
a:link, a:visited { /* Prevents links from automaticilly being underlined, unless otherwide specified */
text-decoration: none;
}
p {
margin-top: 0;
}
body {
margin: 0 auto;
}
/* Main HTML page as starting point */
.container { /* Create a wrapper to center the button objects on screen ...
... This obviously will change according to main page layout */
position: fixed;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: aqua;
padding: 20px 20px 0 20px;
}
/* MODAL ENVIRONMENT */
.modal { /* This is the modal window-overlay that masks out the page we started on */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
animation: modal-open .5s;
z-index: 200;
display: none;
}
/*MODAL BOXES AND CONTENT*/
.modal-content { /* The modal box that pops up inside the modal window-overlay */
position: relative;
background: #fff;
width: 400px;
height: 300px;
top: 25%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 15px;
z-index: 400;
display: inline-block;
}
.modal-header {
height: 15%;
width: 100%;
background-color: #284254;
padding: 5px 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-style: outset;
border-width: medium;
border-color: #7B919D;
border-bottom-style: outset; /* Strengthen shadow at bottom-border bevelled edge */
border-bottom-width: 4px; /* Strengthen shadow at bottom-border bevelled edge */
border-bottom-color: #1F323F; /* Strengthen shadow at bottom-border bevelled edge */
display: inline-block;
}
.modal-body {
width: 100%;
height: 72.75%;
color: #7b7b7b7;
padding: 15px 0;
background-color: #fff;
background: linear-gradient(#fff, #999); /* Adds gradient to the modal box background,...
from white (top) to light grey (bottom) */
}
.modal-footer {
width: 100%;
height: 12.25%;
font-size: 14px;
padding: 5px 15px;
border: none;
outline: none;
border-radius: 15px;
color: #1a73e8;
background-color: #fff;
background: linear-gradient(#fff, #999); /* Adds gradient to the modal box background,...
from white (top) to light grey (bottom) */
}
/*MODAL CONTROLS*/
.modal-open {
width: 150px;
height: 30px;
font-size: 0.9em;
font-weight: normal;
color: #000;
}
.modal-open:hover {
font-size: 1em;
font-weight: bold;
background: dodgerblue;
color: #fff;
}
.modal-close {
position: relative;
background: #c3c3c3c;
width: 42px;
height: 42px;
top: -60px;
left: 38px;
border-radius: 50%;
color: #5b5b5b;
font-size: 2.5em;
font-weight: bold;
line-height: 0.7;
border: solid aqua 5px;
box-shadow: 2px 4px 10px #2d2d2d;
float: right;
display: inline-block;
}
.modal-close:hover {
background: #5b5b5b;
color: #c3c3c3;
}
/*FONTS AND PARAGRAPH SPACING*/
.modal-header-text {
font-size: 1.15em;
font-weight: bold;
text-align: left;
color: #00FFFF;
margin: 5px 5px 5px 5px;
}
.modal-heading{
height: 40px;
font-size: 1.25em;
font-weight: bold;
color: dodgerblue;
text-align: center;
margin: 6px 5px 0 5px;
}
.modal-paragraph{
font-size: 1em;
color: #000000;
line-height: 1.5em;
text-align: center;
margin: 0px 5px 10px 5px;
}
.modal-footer-text {
font-size: 0.9em;
font-weight: normal;
font-style: italic;
text-align: center;
color: #000000;
margin: 5px 5px 5px 5px;
}
/*Footer Anchor Links - /*Anchor-link behaviour in footer*/
.modal-footer-text a:link {
color: #6900CC;
text-decoration: none;
background-color: transparent;
}
.modal-footer-text a {
color: #6900CC;
}
.modal-footer-text a:visited {
color: #505050;
text-decoration: none;
background-color: transparent;
}
.modal-footer-text a:hover {
color: #0000FF;
text-decoration: underline;
background-color: transparent;
}
.modal-footer-text a:selected {
color: #0000FF;
font-weight: bold;
text-decoration: none;
background-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Tue, 05 Feb 2019 11:43:55 GMT">
<title>Multi-modals</title>
<!--JAVASCRIPT-->
<!--Microsoft Internet Explorer - Finds free sourcecode to translate old versions-->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="css/modal-style.css" />
<!--END STYLESHEETS-->
</head>
<body>
<div class="container">
<!--BUTTONS TO TRIGGER MODALS-->
<button class="modal-open" data-modal="search">Search</button>
<button class="modal-open" data-modal="login">Log-in/Sign-up!</button>
<button class="modal-open" data-modal="spare">Spare</button>
</div> <!--End 'container' div-->
<!--MODAL CODE-->
<!--Modal 1-->
<div class="modal" id="search"> <!--Overlay window to act as backdrop to the modal box-->
<div class="modal-content"> <!--Format layout and content of modal box-->
<div class="modal-header"> <!--Format the modal box header-->
<h1 class="modal-header-text">Modal: Search eruditeAlpha.com</h1>
<button class="modal-close">×</button> <!--Button to close modal-->
</div><!--End modal header-->
<div class="modal-body"> <!--Format the modal box body content-->
<h2 class="modal-heading">Search Contents</h2>
<p class="modal-paragraph">This modal is not yet fully functional...</p>
</div> <!--End modal body-->
<div class="modal-footer"> <!--Format the modal box footer-->
<p class="modal-footer-text">Follow me at
<a href="http://adrian-mcglinchey.blogspot.com/" target="blank">
"Adrian's Write"</a> blog space...</p>
</div> <!--End modal footer-->
</div> <!--End modal content-->
</div> <!--End 'modal1' overlay/backdrop-->
<!--Modal 2-->
<div class="modal" id="login"> <!--Overlay window to act as backdrop to the modal box-->
<div class="modal-content"> <!--Format layout and content of modal box-->
<div class="modal-header"> <!--Format the modal box header-->
<h1 class="modal-header-text">Modal: Log-in / Sign-up!</h1>
<button class="modal-close">×</button> <!--Button to close modal-->
</div><!--End modal header-->
<div class="modal-body"> <!--Format the modal box body content-->
<h2 class="modal-heading">Members' Area</h2>
<p class="modal-paragraph">This modal is not yet fully functional...</p>
</div> <!--End modal body-->
<div class="modal-footer"> <!--Format the modal box footer-->
<p class="modal-footer-text">Follow me at
<a href="http://adrian-mcglinchey.blogspot.com/" target="blank">
"Adrian's Write"</a> blog space...</p>
</div> <!--End modal footer-->
</div> <!--End 'modal2' content-->
</div> <!--End 'modal2' overlay/backdrop-->
<!--Modal 3-->
<div class="modal" id="spare"> <!--Overlay window to act as backdrop to the modal box-->
<div class="modal-content"> <!--Format layout and content of modal box-->
<div class="modal-header"> <!--Format the modal box header-->
<h1 class="modal-header-text">Modal: Spare</h1>
<button class="modal-close">×</button> <!--Button to close modal-->
</div><!--End modal header-->
<div class="modal-body"> <!--Format the modal box body content-->
<h2 class="modal-heading">Keep in Reserve</h2>
<p class="modal-paragraph"> This modal is not yet fully functional...</p>
</div> <!--End modal body-->
<div class="modal-footer"> <!--Format the modal box footer-->
<p class="modal-footer-text">Follow me at <a href="http://adrian-mcglinchey.blogspot.com/"
target="blank">
"Adrian's Write"</a> blog space...</p>
</div> <!--End modal footer-->
</div> <!--End 'modal2' content-->
</div> <!--End 'modal3' overlay/backdrop-->
<!--JAVASCRIPT CODE FILE-->
<!--External closing of modal popup boxes-->
<script src="js/modal-script.js" type="text/javascript"></script>
</body>
</html>
With that all said, feel free to comment constructively, people, and please don't be too harsh on me if I've made mistakes; I am a web development enthusiast, not a webGuru.
Thanks once again,
Adrian McG

HTML2Canvas capture modal

I have this code below which consists of a HTML tab and a button which opens my modal. The problem is that i am using the library HTML2canvas and i am trying to capture my HTML tab with the modal below it, i have put my modal code inside my capture div but it doesn't appear in the picture when i download it.
Is what i'm trying to do possible to accomplish? Any help would be greatly appreciated thanks.
function sendData() {
html2canvas(document.getElementById('capture'), {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-top: 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
border-bottom: 8px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 25px;
border: 1px solid #ccc;
border-top: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: white;
}
.jobs-panel {
display: table;
max-height: 100%;
width: 85%;
background-color: #b7bcbe;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
padding-bottom: 20px;
padding-top: 20px;
}
.tabwidth {
width: 85%;
margin: 0 auto;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture">
<div class="jobs-panel">
<button class="modal-button" data-toggle="modal" data-target="#myModal2">MODAL BUTTON</button>
<div class="tabwidth">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Pikachu')" id="defaultOpen">Pikachu</button>
</div>
<div id="Pikachu" class="tabcontent">
<img src="https://s22.postimg.cc/l2txqenox/Pikachu.png" width="300" height="300" crossorigin>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title center">FAQ</h2>
</div>
<div class="modal-body">
<div class="central">
<h3 class="bold-text ">QUESTIONS
</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button id="match-button" onclick="sendData();">capture</button>
<a id="test" href="#"></a>
</body>
</html>

I am adding a helper function for downloading image in this way:
`https://codepen.io/anon/pen/PBGaMP`
Here is the link where i found the downloadCanvas function code:
https://jsfiddle.net/AbdiasSoftware/7PRNN/
Greetings, hope it helps.

Use,
import { useScreenshot } from 'use-react-screenshot'
instead to capture the image of component.
Working fine in react.

Issue with allowing only one checkbox to ever be checked and controlling the class of the parent label based on that

UPDATE:
I fixed one of the issues, I had a typo in my class name spelling... silly mistake!
The last issue is that one MUST always be checked, so basically they cannot ever uncheck one that is already checked, unless selecting another option.
I have been trying to solve an issue with checkboxes and only allowing one to be selected at any one time.
Basically, I want:
only one checkbox to be allowed to be selected at any one time
if a checkbox is checked, its parent label should have a class of "checked-checkbox-parent" and the other checkboxes parents should remove that class (since only one checkbox should be selected, only its parent should ever have that class naturally)
One checkbox will always be selected by default (dependant on the users current subscription), this will be controlled from the database, however, to track that, whatever their subscription type, the parent label of that subscription will have a class of "checked-checkbox-parent" and that checkbox will have a prop of ':checked'.
Relevant code below:
var $boxes = $('#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');
$boxes.on('click', function(e) {
var $box = $(this);
if ($box.is(":checked")) {
var boxGroup = "input:checkbox[name='" + $box.attr("name") + "']";
$(boxGroup)
.prop("checked", false)
.parent()
.removeClass('checked-checkbox-parent');
$box
.prop("checked", true)
.parent()
.addClass('checked-checkbox-parent');
} else {
$box
.prop("checked", false)
.parent()
.removeClass('checked-checkbox-parent');
}
});
.profile-edit-btn {
color: #C99C49;
text-decoration: none;
}
.modal .modal-dialog .modal-content {
border-radius: 0;
}
.modal .modal-dialog .modal-content .modal-header {
background: black;
color: white;
font-family: "museo500";
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
}
.modal .modal-dialog .modal-content .modal-header button {
color: white;
font-family: "museo500";
font-size: 30px;
opacity: 1;
display: block;
}
.modal .modal-dialog .modal-content .modal-body {
background: #F6F6F6;
color: black;
}
#my-details-modal .modal-dialog .modal-content .modal-body form .btn-success {
border-radius: 0;
width: auto;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label,
#my-details-modal .modal-dialog .modal-content .modal-body form input {
width: 100%;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"] {
position: absolute;
top: -9999px;
left: -9999px;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label {
display: block;
background: #C99C49;
margin: 10px 0;
cursor: pointer;
padding: 20px;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label.checked-checkbox-parent {
background: black;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label span {
font-size: 16px;
color: white;
font-family: "museo500";
font-weight: bold;
text-transform: uppercase;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label span:nth-of-type(2) {
font-family: "museo300";
font-weight: normal;
}
#my-details-modal .modal-dialog .modal-content .modal-body form .confirmation-para {
color: black;
font-weight: bold;
font-family: "museo500";
font-size: 14px;
text-transform: uppercase;
}
#my-details-modal .modal-dialog .modal-content .modal-body form input[type="password"] {
display: block;
width: 300px;
font-weight: bold;
font-family: "museo500";
font-size: 14px;
text-transform: uppercase;
padding: 5px;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Open Modal
<div class="modal fade" tabindex="-1" role="dialog" id="my-details-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Update your membership</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<label for="one-month">
<input id="one-month" name="profile-modal-check" type="checkbox">
<span>Monthly</span>
<span class="pull-right">(£30/case)</span>
<div class="clearfix"></div>
</label>
<label for="three-month">
<input id="three-month" name="profile-modal-check" type="checkbox">
<span>3 Months</span>
<span class="pull-right">(£29/case)</span>
<div class="clearfix"></div>
</label>
<label for="six-month">
<input id="six-month" name="profile-modal-check" type="checkbox">
<span>6 Months</span>
<span class="pull-right">(£28/case)</span>
<div class="clearfix"></div>
</label>
<label for="twelve-month">
<input id="twelve-month" name="profile-modal-check" type="checkbox">
<span>12 Months</span>
<span class="pull-right">(£27/case)</span>
<div class="clearfix"></div>
</label>
<p class="confirmation-para">Enter your password to confirm</p>
<input type="password" name="confirmation-password" placeholder="password">
<input type="sumbit" value="confirm" class="btn btn-success pull-right">
</form>
<div class="clearfix"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
If you have any questions, please comment below, I hope everything is clear enough though.

Your code has many superfluous parts. For instance you select all needed checkboxes ($boxes) and then select them again (boxGroup) inside event handler. Why? You can use $boxes variable which already stores exactly the collection you needed.
Furthermore you have to listen for change event, not click.
For select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse.
In this case you don't need to check if this element is checked.
So the code should be noticeably simplified.
In event handler you only need to set "disabled state" props/classes for all elements, then set "enabled state" props/classes for the checked element.
var $boxes = $('#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');
$boxes.on('change', function(e) {
$boxes.prop("checked", false)
.parent().removeClass('checked-checkbox-parent');
$(this).prop("checked", true)
.parent().addClass('checked-checkbox-parent');
});

After a while of thinking and refactoring, this is what I ended up with, it works and might not be the "cleanest" way, but it does exactly what is required as far as I can see.
One checkbox will always be selected
No box that is already checked can be unchecked without another option being selected
the classes swap as expected due to an update on my typo
See comments I made in the code for more information/to see my thought process while programming this earlier.
//target all the checkboxes for membership type
var $boxes = $('#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"]');
//loop over each one and find the one that is to be checked at the start (determined by the users selected current subscription) and add the checked "state" to it
$boxes.each(function() {
if ($(this).attr("checked")) {
$(this)
.prop("checked", true)
.parent()
.addClass('checked-checkbox-parent');
}
});
//when any of the boxes are clicked
$boxes.on('click', function(e) {
//target the box being clicked on
var $box = $(this);
//if it is checked
if ($box.is(":checked")) {
//target all the checkboxes and reset their checked state to false
$boxes
.prop("checked", false)
.parent()
.removeClass('checked-checkbox-parent');
//then select the current box being selected and set its checked state to true, thus only one box can ever be checked and one must always be checked.
$box
.prop("checked", true)
.parent()
.addClass('checked-checkbox-parent');
}
});
.profile-edit-btn {
color: #C99C49;
text-decoration: none;
}
.modal .modal-dialog .modal-content {
border-radius: 0;
}
.modal .modal-dialog .modal-content .modal-header {
background: black;
color: white;
font-family: "museo500";
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
}
.modal .modal-dialog .modal-content .modal-header button {
color: white;
font-family: "museo500";
font-size: 30px;
opacity: 1;
display: block;
}
.modal .modal-dialog .modal-content .modal-body {
background: #F6F6F6;
color: black;
}
#my-details-modal .modal-dialog .modal-content .modal-body form .btn-success {
border-radius: 0;
width: auto;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label,
#my-details-modal .modal-dialog .modal-content .modal-body form input {
width: 100%;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label input[type="checkbox"] {
position: absolute;
top: -9999px;
left: -9999px;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label {
display: block;
background: #C99C49;
margin: 10px 0;
cursor: pointer;
padding: 20px;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label.checked-checkbox-parent {
background: black;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label span {
font-size: 16px;
color: white;
font-family: "museo500";
font-weight: bold;
text-transform: uppercase;
}
#my-details-modal .modal-dialog .modal-content .modal-body form label span:nth-of-type(2) {
font-family: "museo300";
font-weight: normal;
}
#my-details-modal .modal-dialog .modal-content .modal-body form .confirmation-para {
color: black;
font-weight: bold;
font-family: "museo500";
font-size: 14px;
text-transform: uppercase;
}
#my-details-modal .modal-dialog .modal-content .modal-body form input[type="password"] {
display: block;
width: 300px;
font-weight: bold;
font-family: "museo500";
font-size: 14px;
text-transform: uppercase;
padding: 5px;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Open Modal
<div class="modal fade" tabindex="-1" role="dialog" id="my-details-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Update your membership</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<label for="one-month">
<input id="one-month" name="profile-modal-check" type="checkbox" checked>
<span>Monthly</span>
<span class="pull-right">(£30/case)</span>
<div class="clearfix"></div>
</label>
<label for="three-month">
<input id="three-month" name="profile-modal-check" type="checkbox">
<span>3 Months</span>
<span class="pull-right">(£29/case)</span>
<div class="clearfix"></div>
</label>
<label for="six-month">
<input id="six-month" name="profile-modal-check" type="checkbox">
<span>6 Months</span>
<span class="pull-right">(£28/case)</span>
<div class="clearfix"></div>
</label>
<label for="twelve-month">
<input id="twelve-month" name="profile-modal-check" type="checkbox">
<span>12 Months</span>
<span class="pull-right">(£27/case)</span>
<div class="clearfix"></div>
</label>
<p class="confirmation-para">Enter your password to confirm</p>
<input type="password" name="confirmation-password" placeholder="password">
<input type="sumbit" value="confirm" class="btn btn-success pull-right">
</form>
<div class="clearfix"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->