W3.CSSLesson 49Free preview

W3.CSS Modal

This lesson is part of W3.CSS · All levels

Summary

The capital is a dialog window that floats above the page and demands the attention of the user. The structure is composed of .w3-modal as the outer layer and .w3-modal-content as the inner box. The capital is inherently hidden and then opened via JavaScript by converting the value display into a block. (W3.CSS)

Key points

.w3-modal wrapping the entire area of the overlay, .w3-modal-content containing the dialog
The default hidden capital and opened via JavaScript
Close with a cross button or click on the overlay area
It gives a smooth input effect (.w3-animate-zoom)
Include the role="dialog" and the aria-modal="true" for accessibility

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.