Created by Manuel Lorenz
Last Updated on April 12, 2018

# Why we need JavaScript

Make sure to also watch the video on top to see JavaScript and the modal in action.

A modal is a popup window positioned above the actual content of a website. Creating such a modal can be done with HTML and CSS only - make sure to dive into our HTML Beginner’s Guide or our CSS Complete Guide in case you are not familiar with these technologies.

Typically a modal is invisible after the initial page load but it should be displayed after a certain event occurred - a click onto an image on the website for example. Therefore the content/ code of our website must be changed after the page was loaded.

Manipulating the content of a website after the page was loaded is not possible with HTML or CSS, but with JavaScript we have a very powerful programming language to do exactly that.

The web browser not only renders the page itself, it also has to render the underlying code in the browser. This code is represented by the “Document Object Model” (DOM) and with JavaScript we can access and manipulate this code and therefore the elements on our rendered website.

Opening the developer tools in a browser of your choice will show you this DOM: The DOM in the developer tools The ability to access and change this code makes JavaScript such a powerful programming language and is also the reason why basically every modern web page comes with JavaScript code.

# Selecting DOM Elements

Although this is a beginner’s video, you should be familiar with the very basics of JavaScript. In case you never had a look at JavaScript before this video is the perfect starting point.

Changing elements on our website with JavaScript requires us to get access to the elements we want to interact with. In our case, this is the website JavaScript should be added to: The project website This is the modal and the backdrop, both created in HTML and styled with CSS: modal The modal (together with the backdrop) should open whenever we click onto one of the images, so we need to be able to impact the behaviour of the following elements:

  • Each of the two images
  • The modal
  • The backdrop

A common way to select elements in JavaScript is the querySelector method, which allows us to select elements in the DOM using CSS selectors. These could be classes, IDs or other CSS selectors, in our case we will use classes only:

var imageSF = document.querySelector('.trip-image');
var backdrop = document.querySelector('.backdrop');
var modal = document.querySelector('.modal');```

As we want to use these elements in different parts of our code, we declared variables with the corresponding `querySelector` assigned as value. The first step is done, now we need to define what should happen after we clicked onto an image.

# Creating a Function
This is the underlying HTML code for our backdrop and the modal:
```html
<div class="backdrop"></div>
<div class="modal">
  <h1>Get in Touch</h1>
  <p>Contact me to find out more about my exciting trips!</p>
  <a href="contact/index.html"><button>Contact</button></a>
</div>

Both elements have the display: none; declaration applied in the CSS code, therefore changing the value from none to block would be an easy way to make both visible on our website (we’ll work on the fact that this should happen after a certain event - a click event - in the next chapter).

Executing a specific code whenever we want is the perfect application area for functions in JavaScript. In our case the following code will allow us to change the value of the display property for the modal and the backdrop to block:

function openModal() {
  backdrop.style.display = 'block'
  modal.style.display = 'block'
}

Adding a second function named closeModal and changing block back to none let’s the modal and the backdrop disappear again:

function closeModal() {
  backdrop.style.display = 'none'
  modal.style.display = 'none'
}

These are the required functions, the last step now is to finally define the events that will execute our functions.

# Adding “onclick”

Our functions should be called depending on different events. We want to execute openModal once we click onto one of the images and closeModal whenever we click onto the backdrop after the modal opened.

Adding an .onclick event to the corresponding variables will induce exactly that:

imageSF.onclick = openModal
backdrop.onclick = closeModal

With that our modal works perfectly, once we click onto the left image it appears, clicking onto the background let’s it disappear again.

We have one problem though: Clicking onto the second image will not call our function as the querySelector method only selects the first element in the DOM that matches the CSS selector we defined. We used the .trip-images class for both images, therefore we are only able to select the first image.

We have to work on our code to also execute our openModal function after clicking onto the second image. Let’s have a closer look at the required changes and how querySelectorAll, addEventListener and loops will help us to achieve our goal in the next part of this series.