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">×</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.