How to refresh parent page on closing a popup ?

The task is to refresh parent page on closing a popup.

The Steps to achieve this are as follows:

  1. Create a page.
  2. Create a popup.
  3. Popup should contain a button that when clicked refreshes parent page.
  4. Attach an event listener to that button and listen for click event on that button.
  5. Clicking on that button triggers a function that reloads the parent page.

Reloading is achieved by JavaScript using the below statement


Note: Use internal CSS to make page look beautiful. And all CSS code is within <style> tag.






<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
    <title> Refresh Example </title>
        /* Css Styling */
            font-size: 45px;
            font-family: 'Courier New',
            text-align: center;
            padding: 10px 20px;
            font-size: 24px;
            background-color: #0f9d58;
            border: none;
            color: white;
            border-radius: 10px;
            outline: none;
            box-shadow: 0px 3px 2px 1px rgb(100, 100, 100);
            cursor: pointer;
            margin-left: 45%;
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background-color:rgba(100, 100, 100, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            width: 50%;
            height: 50%;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            font-size: 40px;
    <!-- Create a simple web page -->
        <h1>Refresh Example </h1>
        <button class="btn" id="popup-btn">
            Show popup
    <!-- Create a simple popup which is hidden using CSS -->
    <div id="wrapper">
        <div id="popup">
                <button class="btn" id = "close-btn">
    <!-- All JavaScript code and logic -->
        // Attach event listener to open popup
'popup-btn').addEventListener('click', (e)=>{
'wrapper').style.visibility = "visible";
// Attach event listener to first close popup and then refresh page
'close-btn').addEventListener('click', (e) => {
'wrapper').style.visibility = "hidden";




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Article Tags :

Be the First to upvote.

Please write to us at to report any issue with the above content.