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.