An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Techcrunch
- Web Designer Wall
- Just Creative
- Spoon Graphics
- Web Designer Depot
- Web Design Ledger
- Line 25
- Stylized Web
- Spyre Studios
- Android Headlines
Help Webnuz
Referal links:
How to Create Modal Box Using CSS and JS
How to create Modal Box with CSS and JavaScript. The purpose is to complete a transparent and simple modal popup box that does not use third-party libraries and is cross-browser compatible. We have to use vanilla javascript.
Create Modal Box Using CSS and JS
Modal popups are widely used on the web. Some of their popular uses include driving newsletter signups, displaying notifications/alerts, and handling registration forms.
This model will be broad which means you'll be free to use it for any purpose and anywhere.
HTML Markup
<div class="container"> <div class="popup-box"> <a class="close-button popup-close" title="close"></a> <h2>This is My PopUp</h2> <h3>How to create a model box with HTML CSS and JavaScript.</h3> </div></div><a class="button popup-button">Open Model!</a>CSS Code
<style>body { font-family: "Open Sans"; line-height: 200%;}.container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 1.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;}h2, h3{ text-align:center; font-size: 5.5em; padding:20px;}h3{ text-align:center; font-size: 4em; line-height:1.5em; color:#888;}.button { padding: 2.2% 5.5%; display: inline-block; -webkit-transition: all linear 0.15s; transition: all linear 0.15s; border-radius: 3px; background: #7b78ff; font-size: 22px; font-weight: bold; text-decoration: none; text-transform: uppercase; color: #fff;}.button:hover { opacity: 1.75; cursor:pointer; color:#000;}.popup-box { width: 80%; height:500px; padding: 70px; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 50%; left: 50%; box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8); border-radius: 5px; background: #fff; text-align: center;}.close-button { width: 35px; height: 35px; display: inline-block; position: absolute; top: 10px; font-size:60px; right: 10px; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; border-radius: 50%; background: #7b78ff; font-weight: bold; color: #fff; text-align:center; cursor:pointer; }.close-button:hover { -webkit-transform: rotate(180deg); transform: rotate(400deg);}.show-container { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 1.25s 0s, transform 1.25s;}</style>Javascript
<script>const container = document.querySelector(".container");const button = document.querySelector(".button");const closeButton = document.querySelector(".close-button");function togglecontainer() { container.classList.toggle("show-container");}function windowOnClick(event) { if (event.target === container) { togglecontainer(); }}button.addEventListener("click", togglecontainer);closeButton.addEventListener("click", togglecontainer);window.addEventListener("click", windowOnClick);</script>You can read this article in detail from here Create Modal Box Using CSS and JS
To see Demo
Modal boxes are favored globally and now you have an easy-to-use process that is light and does not use third-party libraries like jQuery. You can use this model box for newsletters, sign-ups, or whatever you want! Hope you enjoy the results and find it helpful. If you have any questions please discuss below. Thank you.
Original Link: https://dev.to/elinabey/how-to-create-modal-box-using-css-and-js-3bjj
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To