0

I wrote and copied a small piece of JavaScript for a modal and added it to my main.js file however it doesn't seem to work.

it works on jsfiddle but not on my machine: https://jsfiddle.net/281wr3c6/13/

it just doesn't seem to on my machine for some reason

var modal = document.getElementById("theModal");
var btn = document.getElementById("trigger");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
div.onclick = function() {
  modal.display.style = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.display.style = "none";
  }
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(11,12,12,0.66);
}

.modal.bg {
    padding:30px;
    float: left;
    z-index: 0;
    border: none;
    border-radius: 0;
    margin: 18px 0;
}

.modal .card {
    border: 4px solid #dee0e2;
    padding:24px;
    float: left;
    margin: 18px 0;
    z-index: 10;
    background: #fff;
}

.modal .title {
    width: 90%;
    display: inline-block;
}

.modal h3 {
    margin-top:0;
}

.modal div.buttons button.btn {
    margin-bottom: 0!important;
}

.modal div.buttons button.btn.secondary {
    margin-left: 0!important;
    float: left;
}

.modal div.buttons button.btn.primary {
    margin-right: 0!important;
    float: right;
}

.modal div.close {
    background-image: url("../assets/icons/close.svg");
    display: inline-block;
    height: 18px;
    width: 18px;
    padding: 3px;
    float: right;
}
<button id="trigger" class="btn primary">Open modal</button>
<div id="theModal" class="cd-box modal bg">
  <div class=card>
    <div class="title">
      <h3>Title</h3>
    </div>
    <div class="close"></div>
    <div class="inside">
      <p>This is some content that goes into the modal. The width adjusts according to the content.</p>
    </div>
    <div class="buttons">
      <button class="btn secondary">Exit</button>
      <button class="btn primary">Continue with action</button>
    </div>
  </div>
</div>

I got the code from here: https://www.w3schools.com/howto/howto_css_modals.asp

When I run my code in their fiddle/preview it does work so leads me to think that it's something that my site isn't running?

J4G
  • 211
  • 4
  • 14
  • `div.onclick` isn't a valid function. You haven't defined a variable called `div`. – James Whiteley Aug 22 '18 at 08:39
  • Change it to `span.onclick` (like w3schools have in the example you have copied), and it'll work; alternatively change the `span` variable name to `div`. – James Whiteley Aug 22 '18 at 08:41
  • Thanks James - unfortunately that still hasn't worked, I tried both – J4G Aug 22 '18 at 08:44
  • Other things that need changing - you need the CSS to start with, otherwise the div and its contents will not be hidden when you load the page and the button won't do anything. Also, `modal.display.style` is invalid; it needs to be `modal.style.display`. If none of this works, please add the error your browser's console is printing out to your question. – James Whiteley Aug 22 '18 at 09:01

5 Answers5

1

There are a few things you need to change to get this to work.

First of all like James Whiteley said your div variable isn't defined. So this won't work:

div.onclick = function() {
  modal.display.style = "none";
}

Secondly, you're trying to manipulate the style in ways that aren't possible.

// this will work
modal.style.display = "block";

// this won't
modal.display.style = "none";

Lastly, with your window.onclick it could be very difficult to actually hit the modal. Every click event on its child elements won't have the target of the modal element. You might want to overthink that.

Also if you want to use the div with the class "close" as a trigger, make sure it's actually clickable (by setting its width and height).

Here is some working code:

HTML

<button id="trigger" class="btn primary">Open modal</button>
<div id="theModal" class="cd-box modal bg" style="display: none">
  <div class=card>
    <div class="title">
      <h3>Title</h3>
    </div>
    <div class="close"></div>
    <div class="inside">
      <p>This is some content that goes into the modal. The width adjusts according to the content.</p>
    </div>
    <div class="buttons">
      <button id="exit" class="btn secondary">Exit</button>
      <button class="btn primary">Continue with action</button>
    </div>
  </div>
</div>

Javascript

var modal = document.getElementById("theModal");
var btn = document.getElementById("trigger");
var exit = document.getElementById("exit");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
    modal.style.display = "block";
}
exit.onclick = function () {
    modal.style.display = "none";
}
window.onclick = function (event) {
    console.log(event)
    if (event.target == modal) {
    modal.style.display = "none";
  }
}
Ben
  • 216
  • 2
  • 8
  • thanks for your answer - however it's still not working (none of the solutions do). could there be something else at play here? – J4G Aug 22 '18 at 08:53
  • I tried it and it is working. [try it out](https://jsfiddle.net/281wr3c6/13/). If you have an error inside other parts of the script it could be that the code isn't run. You could look at the console in your browser and see if it prints out any errors. – Ben Aug 22 '18 at 08:56
  • hi ben, thanks a lot. i've just run my code in jsfiddle and it also works: https://jsfiddle.net/281wr3c6/13/ it just doesn't seem to on my machine for some reason – J4G Aug 22 '18 at 09:05
  • No problem. If you could post the console output I may be able to help. You could just edit your question and add it. Also if my answer helped I would really appreciate an upvote :) – Ben Aug 22 '18 at 09:12
1
First thing, you've not defined btn and you're binding an action on it. Second, 
div.onclick = function() {
      modal.display.style = "none"; //  this is wrong , should be :  modal.style.display
    }   



// Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
Sumodh Nair
  • 1,575
  • 1
  • 10
  • 30
  • thanks for your answer - however it's still not working (none of the solutions do). could there be something else at play here? – J4G Aug 22 '18 at 08:53
  • @J4G Your fiddle is clearly pointing out that "div" is undefined? Also, can you post the error in console from your machine? – Sumodh Nair Aug 22 '18 at 08:56
1

I have made a number of modifications to your code and it is now working in this JSFiddle:

https://jsfiddle.net/9ajsnx21/13/

Javascript

var modal = document.getElementById("theModal");
var btn = document.getElementById("trigger");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.display.style = "none";
  }
}

Html

<button id="trigger" class="btn primary">Open modal</button>
<div id="theModal" class="cd-box modal bg">
  <div class="modal-content">
    <div class="title">
      <h3>Title</h3>
    </div>
    <span class="close">&times;</span>
    <div class="inside">
      <p>This is some content that goes into the modal. The width adjusts according to the content.</p>
    </div>
    <div class="buttons">
      <button class="btn secondary">Exit</button>
      <button class="btn primary">Continue with action</button>
    </div>
  </div>
</div>

CSS

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.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 */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

  • The javascript you were using was mostly fine, I changed "div" to "span".

  • The main issue was that you do not appear to have included any of the styling. Including the styling from the example you provided allowed it to work.

MJ_Wales
  • 773
  • 1
  • 6
  • 20
  • thanks for your answer - however it's still not working (none of the solutions do). could there be something else at play here? my fiddle always worked but for some reason doesn't on my machine. – J4G Aug 22 '18 at 08:53
1

Your problem may be that your javascript code is executed before your DOM is ready.

You may want to put your code inside a DOMContentLoaded listener. You can see example here

document.addEventListener("DOMContentLoaded", function(e) {// your code})

You could provide more informations on how it is "not working", error log for example.

Arthur
  • 51
  • 3
0

Thank you everyone - all of your answers were helpful and on point but the biggest issue was that my JS wasn't closed so none of it was firing.

J4G
  • 211
  • 4
  • 14