Feature modal window

[wwily]

Description

The modal window is used on the form page. It allows you to understand whether the operation was successful or not. To see the window, you need to open developer tools and add the class popup_active to the popup. Also It has two modifiers _for_success-event and _for_failure-event. They are used for the popup__paragraph and popup__footer classes. Here is how you can use them:

• for success event

  <div class="popup">
  <div class="popup__container">
   <h2 class="popup__title">Ваша заявка отправлена</h2>
   <p class="popup__paragraph popup__paragraph_for_success-event">Спасибо за ваше участие, ваша заявка уже поступила к нам. В ближайшее время мы рассмотрим ее и оповестим вас.</p>
   <div class="popup__footer popup__footer_for_success-event">
     <button class="button button_view_tertiary" type="button">Закрыть окно</button>
   </div>
  </div>
  </div>

  

• for failure event

  <div class="popup">
  <div class="popup__container">
    <h2 class="popup__title">Что-то пошло не так!</h2>
    <p class="popup__paragraph popup__paragraph_for_failure-event">Проверьте поля, выделенные красным, скорее всего вы забыли их заполнить</p>
    <div class="popup__footer popup__footer_for_failure-event">
     <button class="button button_view_tertiary" type="button">Ок</button>
    </div>
  </div>
  </div>

  

Task Link

Link to Figma

Changes Made

I created a modal window.

Checklist

Before submitting this pull request, please ensure the following:

• [X] I've validated my HTML with Nu Html Checker, and it outputs no errors
• [X] I've checked my HTML with HTML Tree Generator, and it outputs no errors
• I've ensured that the layout matches the mockup for the following control points:
  • [X] 1200px
  • [X] 660px
  • [X] 320px

[MarPostovik]

Hey, @wwily could you please provide the code example of the usage of modifiers in the description of pull request? Also, could you kindly add screenshots of the modal both of success and failure types?

[MarPostovik]

@wwily you should also indicate that in order to see the modal you need to add the class popup_active. Write this in the description of the PR and in the file components.html.

[MarPostovik]

@wwily You didn't import the file popup.css. Please do this. When you do this, you will see that the modal covers other components on the page. So let's not add the class popup_active. Let's just indicate in the description of the component that in order to see the modal the person will need to open developer tools and add the class popup_active to the popup.

[MarPostovik]

Hey @wwily , we should import popup.css before popup_active.css because otherwise it covers styles of the file popup_active.css and if we use the classes properly, we will never see the modal.

We should use the classes like that: By default there is only the class popupand we don't see the modal.

<div class="popup">
 ...
</div>

If we add class popup_active, then there are two classes (popup and popup_active) and we see the modal.

<div class="popup popup_active">
 ...
</div>

Please let me know if you understand this and indicate in the description of PR and in the description of component that in order to see the modal the person will need to go to the developer tools and add class popup_active to the popup.

[wwily]

hey! yes, I got it. Thank you for the suggestion:)

[MarPostovik]

@wwily That's great! Please update also the description of the component in the file components.html with this line, as you've already done in the description of the PR:

To see the window, you need to open developer tools and add the class popup_active to the popup.

[wwily]

done 🙂