My JavaScript modal won't open from the trigger button

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?

div.onclick

div

span.onclick

span

div

modal.display.style

modal.style.display

4 Answers
4

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




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



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.

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

DOMContentLoaded

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


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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.