Theory
Theory
Comments

Hiding the popup

We added a handler, and now the popup opens if you click on the "Show the contact information" button. Let’s make sure that the popup closes when we click on the “X” (the button with the button-close class).

To do this, let’s carry out the familiar series of actions: find the button, write it to a variable, and add a click handler to it. When we click it, we can delete the modal--show class from the popup so that it closes.

We already know how to add classes to elements, but how do we delete them?

We need to use the familiar classList object. If we use the add() method to add the class, then we need to call the remove() method to delete it. We will pass the string with the class that we want to delete to it. The following is how we can express this in code form:

var popup = document.querySelector('.popup');
// Include a period before the selector name.

popup.classList.remove('popup--open');
// Do not include a period before the class name.

The result in the markup is the same as when we delete the class manually.

<!-- Initial state of the markup -->
<section class="popup popup--open">
  …
</section>

<!-- State after classList.remove is called -->
<section class="popup">
  …
</section>

Find the button using querySelector. We are not going to search the entire document, but just inside the popup element. We know for sure that the button is there, so it would be excessive to run a search across the entire document. This is a resource-intensive operation, because the document may be very large.

Add a button click handler with the button-close class, and check that everything is configured correctly and that the popup actually closes. We will not specify the evt parameter in this handler, since we are not going to use the event object inside the handler function. The button-close element is a button. It has no default actions that have to be cancelled.

By the way,

pay attention to the fact that we write a dot when we search for an element by selector, but we do not write a dot when deleting or adding a class. It is important to remember this rule. To make it easier, you should remember that the classList.remove and classList.add names are self-explanatory. We are doing something with the element class, so the only thing we need to do is pass the string with the class name. And there are various ways of searching for the element written after querySelector. We already discussed them before. Therefore, we write a dot before the name of the class to explicitly indicate that we are searching for classes and not for tags or anything else.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CandyShop</title> <link href="candy-shop/setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <section class="card"> <div class="card__content"> <h1 class="visually-hidden">The CandyShop Ice Cream Parlor</h1> <img class="card__logo" src="candy-shop/candyshop.svg" width="205" height="63" alt="The CandyShop"> <p class="card__text">We make ice cream from the freshest cream!</p> <img class="card__img" src="candy-shop/icecream.png" width="196" height="240" alt="Ice cream"> </div> <div class="card__controls"> <a href="contacts.html" class="card__button button-open">Show contacts</a> </div> </section> <section class="modal modal--show"> <div class="modal__content"> <h2 class="visually-hidden">Contact us</h2> <h3>Address:</h3> <p>19/8 Bolshaya Konyushennaya, St. Petersburg, 191186</p> <h3>Phone:</h3> <p>+7 (812) 275-75-75</p> <h3>Email:</h3> <p>mail@htmlacademy.ru</p> <button class="modal__button button-close" type="button">Close</button> </div> </section> <script src="script.js"></script> </body> </html>

CSS

h3 { margin: 0.5em 0; } p { margin: 0.5em 0 2em; } .card { width: 420px; margin: 50px auto 0; } .card__content { position: relative; background-color: #fad400; display: flex; flex-direction: column; align-items: flex-start; padding-top: 15px; padding-left: 20px; box-shadow: 0 5px 8px 0 #e8e8e8; } .card__img { align-self: flex-end; margin-top: auto; } .card__logo { position: absolute; } .card__text { font-size: 16px; line-height: 22px; font-weight: bold; position: absolute; left: 20px; top: 100px; width: 190px; } .card__controls { display: flex; justify-content: center; align-items: center; border: 2px solid #e8e8e8; border-top: 0; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding-top: 20px; padding-bottom: 20px; } .card__button { border: 0; padding: 12px 0; width: 230px; text-transform: uppercase; text-align: center; border-radius: 50px; color: #ffffff; font-weight: bold; font-size: 16px; text-decoration: none; background-color: #fad400; } .card__button:hover, .card__button:focus { background-color: #82da03; } .card__button:active { color: rgba(255, 255, 255, 0.3); background-color: #6cb502; } .modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal--show { display: block; } .modal::after { content: ""; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .modal__content { position: relative; width: 300px; margin: 100px auto; padding: 30px 70px 15px; background-color: #ffffff; box-shadow: -1px 5px 12px 0 rgba(89, 90, 90, 0.3); z-index: 2; } .modal__button { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; font-size: 0; background: none; border: 0; } .modal__button::after, .modal__button::before { content: ""; position: absolute; right: 0; top: 20px; width: 26px; height: 6px; margin: -13px -3px; background-color: #7656de; } .modal__button::before { transform: rotate(45deg); } .modal__button::after { transform: rotate(-45deg); } .modal__button:hover::after, .modal__button:hover::before, .modal__button:focus::after, .modal__button:focus::before { background-color: #9b7ff7; } .modal__button:active::after, .modal__button:active::before { background-color: #4023a0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; }

JavaScript

var popup = document.querySelector('.modal'); var openPopupButton = document.querySelector('.button-open'); openPopupButton.addEventListener('click', function (evt) { evt.preventDefault(); popup.classList.add('modal--show'); });

Click inside the mini browser to put the focus in this window.

Goalscompleted

Create a variable closePopupButton that will contain the element with the button-close class after the openPopupButton variable. Search for the element inside the popup.
Below, after the openPopupButton handler, add the click handler to closePopupButton.
Delete the modal--show class from the popup using classList.remove() inside the handler.
Close the popup by clicking on the closePopupButton button.

Hiding the popup

Comments

Log in

Sign up

Restore access