CODEWITHSUNDEEP
javascript
Jacob Truax
Jacob Truax

Reputation: 77

Change modal backgroundColor on button click using Javascript

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">&times;</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();
})

Upvotes: 0

Views: 1372

Answers (2)

SONGSTER
SONGSTER

Reputation: 615

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";

Upvotes: 1

troxwalt
troxwalt

Reputation: 415

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";

Upvotes: 0

Related Questions