11

How to Create Modal Box Using CSS and JS

 2 years ago
source link: https://dev.to/elinabey/how-to-create-modal-box-using-css-and-js-3bjj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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>

Enter fullscreen mode

Exit fullscreen mode

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>

Enter fullscreen mode

Exit fullscreen mode

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>

Enter fullscreen mode

Exit fullscreen mode

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK