Theory
Theory
Comments

Hiding the popup

We added a handler, and now the popup opens if you click on the "Show contacts" 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, assign it to a variable, and add a click handler to it. When we click it, we can remove the modal--show class from the popup so that it closes.

We already know how to add classes to elements, but how do we remove 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 remove it. We will pass a string containing the class name that we want to remove to it. The following is how we can express this in code form:

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

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 remove 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 that the button is there. Calling querySelector on popup limits the search to that element, rather than the entire document.

Add a click handler to the button 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 using a class 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 specifying a selector passed to querySelector. We already discussed them before. Therefore, we write a dot before the name of the class to explicitly indicate that we are searching by class and not by tag 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

After the declaration of openPopupButton, create a variable closePopupButton that will contain the element with the button-close class. Search for the element inside the popup.
Below, after the handler for openPopupButton, add the click handler to closePopupButton.
Remove 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