Member Avatar for mitu1997 
<html>
<head>
<style>





.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 20% auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 70%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
</style>



</head>
<body>

<h1>Popup/Modal Windows without JavaScript</h1>
<div class="bo">
    <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay ">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            Thank to pop me out of that button, but now i'm done so you can close this window.
        </div>
    </div>
</div>




</body>
</html>

how to I do ? this is my code plzz help......

  • 2 Contributors
  • 1 Reply
  • 289 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

The CSS-only :target approach in 's post works but changes the URL hash and is awkward to auto-close. ' suggestion to fade the element is exactly the right idea; below is a small, modern vanilla-JS pattern that does the same fade without jQuery and without altering the URL.

Use a class toggle and CSS transitions (animate opacity and transform, not display). Place the overlay at the end of the <body> so it covers everything.

/* CSS */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 9999;
}
.modal-overlay.show {
  background: rgba(0,0,0,0.7);
  opacity: 1;
  pointer-events: auto;
}
.modal-panel {
  width: 320px;
  margin: 10% auto;
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
}
.modal-overlay.show .modal-panel {
  transform: translateY(0);
  opacity: 1;
}
// JavaScript (vanilla)
const btn = document.getElementById('loginBtn');
const overlay = document.getElementById('modalOverlay');

btn.addEventListener('click', function(e){
  e.preventDefault(); // only if delaying navigation/submission to show the message
  overlay.classList.add('show');
  // auto-hide after 1.8s (optional) or remove when login completes
  setTimeout(() => overlay.classList.remove('show'), 1800);
});

Notes and gotchas: if the login is a real form submission, show the thank-you overlay only after the server confirms success (use fetch/XHR and display on success), otherwise the page will navigate before the fade appears. For accessibility add role="dialog" to the panel, toggle aria-hidden, move focus into the dialog while it's visible, and restore focus on close. If the fade doesn't run, check that the overlay is not covered by another element (z-index) and that the transition is on animatable properties (opacity/transform).

Member Avatar for hericles

Add jQuery to your site if you haven't already and call fadeOut() on the div to make it slowly disappear.

$('.overlay').fadeOut(500);

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.