modal vanilla js

Fierce Flatworm answered on July 29, 2022 Popularity 8/10 Helpfulness 2/10

answer modal vanilla js

modal vanilla js

Comment

.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  &.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  &-bg {
    position: absolute;
    background: teal;
    width: 100%;
    height: 100%;
  }
  &-container {
    border-radius: 10px;
    background: #fff;
    position: relative;
    padding: 30px;
  }
  &-close {
    position: absolute;
    right: 15px;
    top: 15px;
    outline: none;
    appearance: none;
    color: red;
    background: none;
    border: 0px;
    font-weight: bold;
    cursor: pointer;
  }
}

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: daily-dev-tips.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jul 29 2022

Fierce Flatworm

0 Answers Avg Quality 2/10

modal vanilla js

Contents

More Related Answers

modal vanilla js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.