Change modal backgroundColor on button click using Javascript
Question
I created a linear-gradient and animated it in javascript and set it as the background to my website. Then I added a button in HTML that when clicked the colors of the gradient switch out.
Now I am trying to make the button also change the backgroundColor of a modal on my page, but I can't seem to figure it out. Could anyone help me see where I went wrong? I think I am just having a problem targeting the class of .modal that is on the modal div.
I will firstly put the broken javascript of when I attempt to add the function to change the modal background. Then I will put the html, css, and javascript that is not broke (without the code to change the modal background.
Broken Javascript
var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000", modalz = "rgba(0, 0, 0, 0.6)";
var changeBackground = function() {
angle = angle + .3
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color;
requestAnimationFrame(changeBackground)
}
var changeFont = function() {
document.querySelectorAll('li').forEach(li => li.style.color = font);
}
var changeShadow = function() {
document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}
var changeModal = function() {
document.body.style.modal.backgroundColor = "rgba(0, 0, 0, 0.6)";
}
changeBackground()
changeFont()
changeShadow();
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
colors = (colors != "#000") ? "#000" : "#759ef3";
font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
modalz = (modalz != "rgba(0, 0, 0, 0.6)") ? "rgba(0, 0, 0, 0.6)" : "rgba(240, 240, 240, 1)";
changeFont()
changeModal()
changeShadow();
})
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jacob Truax Portfolio</title>
<script src="main.js"></script>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p> This is a test </p>
</div>
</div>
<!-- Button triggering color change -->
<div id="myBtn" class="Btn">
<button></button>
</div>
<!-- main content -->
<div class="main">
<ul>
<li id="hover1-1" class="fnup">fn-up</li>
<li id="hover1-2" class="about">about</li>
<li id="hover1-3" class="issue">issue 0</li>
<li id="hover1-4" class="contact">contact</li>
</ul>
</div>
Css
/* The Modal (background) */
.modal {
color: #fff;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 20px; /* Location of the box */
padding-bottom: 20px;
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.6); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
margin: auto;
text-align: center;
padding: 20px;
width: 80%;
font-size: 3vw;
line-height: 6.4vh;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
display: none;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* End modal ============ */
body {
background-color: #d22c1f;
font-family:"Brrr", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 700;
font-size: 12vw;
overflow: hidden;
perspective: 1500px;
height: 100vh;
width: 100vw;
}
@media only screen and (min-width: 1600px) {
body {
font-size: 210px
}
}
/* a {
opacity: 0;
color: rgba(102, 102, 102, 0);
text-decoration: none;
display: inline-block;
} */
/* the main contet is in 3d space and rotates slightly with the cursor */
.main {
position: relative;
height: 100vh;
width: 100vw;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
}
li {
text-shadow: 4px 4px 40px #000;
color: rgba(102, 102, 102, .3);
padding-left: 60px;
top: -10px;
display: inline-block;
}
div.Btn {
position: fixed;
line-height:0;
font-size: 0px;
right: 3vw;
bottom: 3vh;
width: 36px;
height: 36px;
background-image: url(lib/frown.svg);
opacity: 0.3;
mix-blend-mode: overlay;
z-index: 2;
}
div.Btn:hover {
background-image: url(lib/smile.svg);
opacity: 0.3;
mix-blend-mode: overlay;
}
button {
width: 36px;
height: 36px;
border: none;
outline:none;
background: transparent;
border: none !important;
cursor: pointer;
font-size:0;
}
Javascript (not broken)
var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";
var changeBackground = function() {
angle = angle + .3
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color;
requestAnimationFrame(changeBackground)
}
var changeFont = function() {
document.querySelectorAll('li').forEach(li => li.style.color = font);
}
var changeShadow = function() {
document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}
changeBackground()
changeFont()
changeShadow();
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
colors = (colors != "#000") ? "#000" : "#759ef3";
font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
changeFont()
changeShadow();
})
2 answers
solution1
1 2018-07-09 12:50:35
You can try this instead. Give your modal an id. Let's say you give it elem .
var elem = document.getElementById("elem");
elem.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
the problem must be with this syntax
document.body.style.modal.backgroundColor= "blue";
solution2
0 2018-07-09 13:30:37
I may be missing something obvious, but to my knowledge, document.body.style.modal doesn't return anything. You should access the element with the class of modal and then assign the color. document.querySelector('.modal').style.backgroundColor = "blue";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JavaScript to change backgroundColor of grid cell on Click
`Div.backgroundColor` change to `Element.backgroundColor` using Javascript
Detecting change in css backgroundColor using Vanilla JavaScript
backgroundColor change JavaScript
change backgroundcolor - jQuery/Javascript
open window on click of button as modal dialog using javascript
how to auto click dhtml modal dialog window button using javascript?
How to change button text on click using JavaScript?
working on date change on button click using javascript
change input button style using javascript on click
Related Tags