Modal

The modal component provides a solid foundation for creating dialogs. popovers, lightboxes, or whatever else.

// CSS
@import url("https://magnificentui.netlify.app/src/components/modal/modal.css");

// HTML
<link rel="stylesheet" href="https://magnificentui.netlify.app/src/components/modal/modal.css">

To use the modal component, use the classes mentioned in the code snippet and for the functionality add the javasciprt. Example modal modal_container

Click here to open modal --->

<button class="btn btn--primary" id="show_modal__btn">Open Modal</button>

				</div>
				<div class="modal_container">

					<article class="modal">
						<header class="modal__header">
						  <h3>Modal</h3>
						  <div id="modal_close__btn" class="btn btn--icon btn--close--transparent btn--circular dark">
							  <i class="bx bx-x"></i>
							</div>
						  </button>
						</header>
						<p class="modal-description">
						  Lorem ipsum dolor sit amet consectetur adipisicing elit.
						  Deserunt ad voluptatum.
						</p>
					</article>
				</div>


	// javascript
const modalShowBtn = document.querySelector("#show_modal__btn");
const modalCloseBtn = document.querySelector("#modal_close__btn");
const modalWrapperBtn = document.querySelector(".modal_container");

modalShowBtn.addEventListener("click", () => { modalWrapperBtn.style.display = "flex";});

modalCloseBtn.addEventListener("click", () => {	modalWrapperBtn.style.display = "none";
});

Note: Used 10px as root font size.