What is the best way to close a popup window?

Is there a way to close my popup?

function hidePopup(){
  document.getElementById("popup-1").classList.remove("active");
}
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

.popup .overlay{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%) scale(0);
  background: #fff;
  width: 450px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay{
  display: block;
}

.popup.active .content{
  transition: all 300ms ease-in-out;
transform:translate(-50%, -50%) scale(1);
}

h1{
  font-family: 'Source Sans Pro', sans-serif;
}

p{
  font-family: 'Source Sans Pro', sans-serif;
}

button{
  font-family: 'Source Sans Pro', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <script src="script.js"></script>
</body>
</html>
<div class="popup" id="popup-1">
<div class="overlay"></div>
  <div class="content">
    <div class="close-btn">&times;</div>
    <h1>Test Popup!</h1>
    <p>Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup!</p>
    </div>
    </div>

    <button onclick="hidePopup()">Close Popup</button>

javascripthtmlcss

Answer №1

Simply add a click event listener to the close button that triggers the togglePopup function:

function togglePopup() {
  document.getElementById("popup-1").classList.toggle("active");
}
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  width: 450px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

h1 {
  font-family: 'Source Sans Pro', sans-serif;
}

p {
  font-family: 'Source Sans Pro', sans-serif;
}

button {
  font-family: 'Source Sans Pro', sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="script.js"></script>
</body>

</html>
<div class="popup" id="popup-1">
  <div class="overlay"></div>
  <div class="content">
    <div class="close-btn" onclick="togglePopup()">&times;</div>
    <h1>Test Popup!</h1>
    <p>Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup!</p>
  </div>
</div>

<button onclick="togglePopup()">Open Popup</button>

If you want the popup to show up after 10 seconds, utilize the setTimeout function as shown below:

function togglePopup() {
  document.getElementById("popup-1").classList.toggle("active");
}
setTimeout(togglePopup, 2000);  //change the second parameter to 10000 for 10 seconds delay.
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  width: 450px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

h1 {
  font-family: 'Source Sans Pro', sans-serif;
}

p {
  font-family: 'Source Sans Pro', sans-serif;
}

button {
  font-family: 'Source Sans Pro', sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="script.js"></script>
</body>

</html>
<div class="popup" id="popup-1">
  <div class="overlay"></div>
  <div class="content">
    <div class="close-btn" onclick="togglePopup()">&times;</div>
    <h1>Test Popup!</h1>
    <p>Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup! Test Popup!</p>
  </div>
</div>

<button onclick="togglePopup()">Open Popup</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Securing API access by limiting it to verified domains with Express.js

I am currently enhancing the security of my Node.js/Express.js application by implementing restrictions on access to an authlist (authorized list) of domains. Note: The opposite of an authlist is a denylist. Overview: Users are able to create a Proje ...

javascriptnode.jsapiexpresscross-domain

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

I have come across some examples where users can copy HTML text to the clipboard. However, I am working on something more dynamic. Here's what I'm trying to achieve: <button id="" ng-click="outputFolder()">Output Folder</button> $sc ...

javascriptjqueryhtmlangularjs

How can Vue.js implement a satisfactory method for synchronizing computed values with asynchronous data?

Imagine retrieving a list of products from the state manager in your Vue.js component, where a computed property is then used to process this list for display on the DOM. <template> <span>{{ computedProducts }}</span> </template> ...

javascriptvue.js

Generate TypeScript type definitions for environment variables in my configuration file using code

Imagine I have a configuration file named .env.local: SOME_VAR="this is very secret" SOME_OTHER_VAR="this is not so secret, but needs to be different during tests" Is there a way to create a TypeScript type based on the keys in this fi ...

javascriptnode.jstypescriptenvironment-variables

When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

import React from 'react'; import Link from 'next/link'; import { urlFor } from '../lib/clients'; const Product = ({ product: { image, name, slug, price } }) => { return ( <div> <Link href={`/product/ ...

javascripttypescriptnext.jsproject

Vue JS - Troubleshooting Checkbox Validation Error During Form Submission

When a user fills out my registration form, there is a checkbox to confirm acceptance of the terms and conditions. Currently, the validation error for this checkbox appears immediately upon hitting submit, even though the checkbox starts as unchecked. The ...

javascriptvue.jsecmascript-6vuejs2

Setting up a Web application testing environment on its own

Embarking on my journey in web application development and testing, I am currently involved in a project that requires me to create a standalone environment for testing the web application. The main goal is to ensure the web application is easily testable ...

javascriptjsonnode.jswebweb-applications

The footer moves upwards when a file is downloaded

I am facing an issue with my website footer and its CSS styling. #footer { position: absolute; bottom: 0; width: 100%; height:8rem; } The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on th ...

htmlcssangular

Enhance your SVG progress circle by simply selecting checkboxes

I have a unique system with 5 checkboxes that act as a To-Do list. When I click on each checkbox, the circle's diameter should progressively fill up in increments of 1/5 until all 5 checkboxes are completed. The order in which the checkboxes are click ...

javascripthtmlcsssvgcheckbox

What coding techniques can be used to create dynamic animation of a log stream in javascript/css

When I have a series of events in my browser, I want to display them as a list with a smooth animation effect. As each new event comes in, I'd like the existing items to slide down gracefully, making room for the new event to fade in at the top of the ...

javascriptjquerycssanimationcss-animations

Determine the row index by identifying the row id and table id

I need to retrieve the Index number of a row when a hyperlink is clicked, while also passing additional data from this tag. <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"&g ...

javascripthtml

Node.js used to create animated gif with unique background image

As I navigate my way through the world of node.js and tools like express and canvas, I acknowledge that there might be errors in my code and it may take me some time to grasp certain concepts or solutions. My current project involves customizing a variati ...

javascriptnode.jscanvas

Exploring the power of VueJs through chaining actions and promises

Within my component, I have two actions set to trigger upon mounting. These actions individually fetch data from the backend and require calling mutations. The issue arises when the second mutation is dependent on the result of the first call. It's cr ...

javascriptvue.jsvuexes6-promise

Creating a single factory that consolidates multiple return statements

Exploring the ins and outs of AngularJS, I find myself eager to learn how to effectively combine two factory modules. Specifically, I am interested in merging the following two: // Factory Module One services.factory('UserService', function ($re ...

javascriptangularjsrest

The onClick event handler is triggered on page load instead of waiting for a click

Recently delving into React, I encountered an issue while attempting to call a function set as a prop. Take a look at my component below: class SamplesInnerLrg extends Component { playSampleAction(sample,sampleId) { console.log(sample); } ...

javascriptreactjsecmascript-6

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

htmlcssnode.jshandlebars.js

Responsive design issues with Bootstrap 3 box layout

I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the b ...

javascripthtmlcssbootstrap-4responsive-design

"Duplicate content issue with ng-transclude causing element to render twice

Why is the transcluded directive displaying Name inside directive = Frank twice? I believed I had a good grasp on transclusion, but this specific scenario has left me puzzled. Check out this fiddle for more details <div ng-app="myApp" ng-controller=" ...

javascriptangularjsangularjs-ng-transclude

Insert half a million records into a database table using JavaScript seamlessly without causing the webpage to crash

I am facing an issue with my report system where running a single report query results in over 500,000 rows being returned. The process of retrieving the data via AJAX takes some time, but the real problem arises when the browser freezes while adding the H ...

javascripthtmlajax

React does not allow objects as child elements. Instead, render a collection of children by using an array

Encountering an error with this React class Error: Objects are not valid as a React child (found: object with keys {_id, name}). If you meant to render a collection of children, use an array instead. Is there anything amiss here? I am passing the movies ...

javascriptreactjs