March 10, 2022

How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS.

Have you ever wanted a pop-up mechanism on your website, but you do not want to use JavaScript? Here is the way:

  • Add <details> and <Summary> to your document
  • Enter <DIV> to <Details>
  • Add animated scaling to this <div>
  • Add this animation to <div> when the [Open] feature is switched on an item <Details>
  • Switch how to turn on the button for more information.

automatic pop up window html, css modal popup, popup html css codepen, html modal popup, popup overlay css codepen, javascript modal popup

How to make use of it:

1. Create a popup toggle aspect utilizing <summary> aspect.

<summary>Click Me</summary>

2. Wrap your individual popup content along with the toggle aspect into a <details> aspect.

<details>
  <summary>Click Me</summary>
  <div>
    Popup Content Here
  </div>
</details>

3. The important CSS for the popup panel.

details {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  margin-top: 2rem;
  color: #6b7280;
  display: flex;
  flex-direction: column;
}

details div {
  background-color: #1e1e27;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  border-radius: 8px;
  position: absolute;
  max-height: calc(100vh - 100px);
  width: 400px;
  max-width: calc(100vw - 2rem);
  bottom: calc(100% + 1rem);
  right: 0;
  overflow: auto;
  transform-origin: 100% 100%;
  color: #95a3b9;
}

details div::-webkit-scrollbar {
  width: 15px;
  background-color: #1e1e27;
}

details div::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 99em;
  background-color: #95a3b9;
  border: 5px solid #1e1e27;
}

details div > * + * {
  margin-top: 0.75em;
}

details div p > code {
  font-size: 1rem;
  font-family: monospace;
}

details div pre {
  white-space: pre-line;
  border: 1px solid #95a3b9;
  border-radius: 6px;
  font-family: monospace;
  padding: 0.75em;
  font-size: 0.875rem;
  color: #fff;
}

details[open] div {
  -webkit-animation: scale 0.25s ease;
          animation: scale 0.25s ease;
}

summary {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 0.75em 3em 0.75em 1.25em;
  border-radius: 99em;
  color: #fff;
  background-color: #185adb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover, summary:focus {
  background-color: #1348af;
}

summary svg {
  position: absolute;
  right: 1.25em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

CSS Only Popup Panel, Pop-up without JavaScript Plugin/Github, html popup window


See Demo And Download

Official Website(havardob): Click Here

This superior jQuery/javascript plugin is developed by havardob. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.