I have a modal popup that shows different content based on buttons clicked. The popup is layed out in columns, with the right column having the content that is shown differently based on the button pressed. When you first open the popup there is supposed to be content already showing and to see something different, pressing a button is supposed to deactivate the current preview and activate a different one. Right now however, all of the content within that column, activated or deactivated, is showing all at once in an inline-block. Can someone please help me figure this out.
<style>
/* For mobile phones: */
[class*="col-"] {
width: 80%;
display:inline-block;
margin-top:10px;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;display: inline-block;vertical-align: middle;}
.colbs-4 {display:none}
.col-s-5 {width: 41.66%;display: inline-block;vertical-align: middle;}
.col-s-6 {width: 50%;display: inline-block;vertical-align: middle;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
.margin-60{margin-top:60 px;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.colb-4 {width: 33.33%;display: inline-block;vertical-align: middle;}
.col-4 {width: 33.33%;display: inline-block;vertical-align: middle;}
.col-5 {width: 41.66%;display: inline-block;vertical-align: middle;}
.col-6 {width: 50%;display: inline-block;vertical-align: middle;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.margin-60{margin-top:60px;}
}
.modalNew {
display: none;
position: fixed;
z-index: 100000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(179, 179, 179, 0.85);
}
.options-container-new {
position: relative;
width: 100%;
justify-content: center;
padding: 0px;
font-family: "Roboto Medium", sans-serif;
}
.option-new.selected {
background-color: gray;
color: white;
}
.option-new{
padding: 10px;
margin-top: 5px;
}
.arrows-container1, .arrows-container2 {
position: relative;
text-align: center;
margin: auto;
padding: 10px;
z-index: 900;
width: 80%;
}
.arrows-container1 button, .arrows-container2 button {
border-radius: 5px;
padding: 5px 20px
}
</style>
<!-- The Modal -->
<div id="myModal-02" class="modalNew" style="margin: auto; text-align:center;">
<!-- LEFT SIDE -->
<div class="col-4 col-s-4 margin-60">
<img id="matrix-img-02" src="URL" style="max-height:650px;">
</div>
<!--RIGHT SIDE-->
<div class="col-6 col-s-6 margin-60">
<!--Right Side Content (images) -->
<!--First Box (Why?) -->
<div class="preview-box" id="1">
<img id="myImg" src="URL">
</div>
<!--Second Box (Learn More?) -->
<div class="preview-box disabled" id="2">
<!-- 1st Learn More -->
<div class="sub-box1">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.1 --></a>
</div>
</div>
<!-- 2nd Learn More -->
<div class="sub-box1 disabled">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.2 --></a>
</div>
</div>
<!-- 3rd Learn More -->
<div class="sub-box1 disabled">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.3 --></a>
</div>
</div>
<!-- Arrows -->
<div class="arrows-container1">
<button onclick="previousSubBox1()"><<</button>
<button onclick="nextSubBox1()">>></button>
</div>
</div>
<!--Third Box (How Tos) -->
<div class="preview-box disabled" id="3">
<!-- First How To -->
<div class="sub-box2">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.1 --></a>
</div>
</div>
<!-- Second How To -->
<div class="sub-box2 disabled">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.2 --></a>
</div>
</div>
<!-- Third How To -->
<div class="sub-box2 disabled">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.3 --></a>
</div>
</div>
<!-- Fourth How To -->
<div class="sub-box2 disabled">
<img id="myImg" src="URL">
<div><a href="URL"><!-- 2.3 --></a>
</div>
</div>
<!-- Arrows -->
<div class="arrows-container2">
<button onclick="previousSubBox2()"><<</button>
<button onclick="nextSubBox2()">>></button>
</div>
</div>
<!--Fourth Box (Financial Incentives) -->
<div class="preview-box disabled" id="4">
<img id="myImg" src="URL">
</div>
</div>
<!--Buttons To Change Content -->
<div>
<div class="colb-4 colbs-4">
</div>
<!--Options-->
<div class="col-6 col-s-6">
<div class="options-container-new">
<button class="option-new selected" onclick="activatePreview(this, 1)">Why?
</button>
<button class="option-new" onclick="activatePreview(this, 2)">Learn More
</button>
<button class="option-new" onclick="activatePreview(this, 3)">How To's
</button>
<button class="option-new" onclick="activatePreview(this, 4)">Financial Incentives
</button>
</div>
</div>
</div>
<!--Button To Close POPUP -->
<div class="bottom col-12 col-s-12">
<button class="close-container" onclick="closeModal()">Close Tip Card</button>
</div>
</div>
</div>
And this is the javascript I've been using:
<script>
var pictures = document.getElementsByClassName("picture");
console.log(pictures)
for (var i = 0; i < pictures.length; i++) {
pictures[i].addEventListener("click", openModal);
}
var currentModal = null;
function openModal(element) {
currentModal = document.getElementById("myModal-" + element.target.id);
var img = document.getElementById("myImg");
var modalImg = document.getElementById("matrix-img-" + element.target.id);
currentModal.style.display = "inline-block";
currentModal.src = img.src;
}
window.onclick = function (event) {
if (event.target == currentModal) {
currentModal.style.display = "none";
}
};
function closeModal() {
hidePreviews();
currentModal.style.display = "none";
}
function activatePreview(target, id) {
deactivatePreviews();
target.classList.add("selected");
var previewBoxes = currentModal.getElementsByClassName("preview-box" );
console.log('length'+previewBoxes.length)
for (var i = 0; i < previewBoxes.length; i++) {
if (previewBoxes[i].id == id)
previewBoxes[i].classList.remove("disabled");
else previewBoxes[i].classList.add("disabled");
}
}
function deactivatePreviews() {
var buttons = currentModal.getElementsByClassName("option-new");
for (var i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("selected");
}
}
function hidePreviews() {
var previews = currentModal.getElementsByClassName("preview");
for (var i = 0; i < previews.length; i++) {
previews[i].style.display = "none";
}
}
function nextSubBox1() {
var subBoxes = currentModal.getElementsByClassName("sub-box1");
for (var i = 0; i < subBoxes.length; i++) {
if (subBoxes[i].className == "sub-box1" && i + 1 < subBoxes.length) {
subBoxes[i].classList.add("disabled");
subBoxes[i + 1].classList.remove("disabled");
return;
}
}
}
function previousSubBox1() {
var subBoxes = currentModal.getElementsByClassName("sub-box1");
for (var i = 0; i < subBoxes.length; i++) {
if (subBoxes[i].className == "sub-box1" && i - 1 >= 0) {
subBoxes[i].classList.add("disabled");
subBoxes[i - 1].classList.remove("disabled");
return;
}
}
}
function nextSubBox2() {
var subBoxes = currentModal.getElementsByClassName("sub-box2");
for (var i = 0; i < subBoxes.length; i++) {
if (subBoxes[i].className == "sub-box2" && i + 1 < subBoxes.length) {
subBoxes[i].classList.add("disabled");
subBoxes[i + 1].classList.remove("disabled");
return;
}
}
}
function previousSubBox2() {
var subBoxes = currentModal.getElementsByClassName("sub-box2");
for (var i = 0; i < subBoxes.length; i++) {
if (subBoxes[i].className == "sub-box2" && i - 1 >= 0) {
subBoxes[i].classList.add("disabled");
subBoxes[i - 1].classList.remove("disabled");
return;
}
}
}
</script>
Sorry if this is alot, I didnt know if I should include all of it or not.. context is important. I've tried defining the previews class, nothing. I've tried giving an element ID to the preview-box, nothing. Thanks for any help if you can.
