Javascript: Modal window

JS: DOM API
Last update: 22 Jan 23:20
0
Students

application.js

Implement and export as default the function that controls modal windows.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>
  • Buttons of modal windows are found using the data-toggle="modal" selector
  • The window's ID is stored in the button's data-target attribute
  • To make the window pop up, you need to add the show class and set the display style to block in the element with a relevant id in a data-target
  • The cross available by the selector data-dismiss="modal" hides the modal window. Clicking it has the opposite effect, the show class is removed, and display is set to none

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests