In this article, we are given the task to refresh the parent page by closing a popup.
Approach: The Steps to achieve this are as follows:
- Create a page.
- Create a popup.
- Popup should contain a button that when clicked refreshes the parent page.
- Attach an event listener to that button and listen for the click event on that button.
- Clicking on that button triggers a function that reloads the parent page.
Reloading is achieved by JavaScript using the below statement
The location.reload() method in HTML DOM is used to reload a current page document, this method refreshes the current document.
Syntax:Â
window.location.reload();
Note: Use internal CSS to make the page look beautiful. And all CSS code is within <style> tag.
Example: This example uses the above-explained approach.
html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,                initial-scale=1.0">    <title> Refresh Example </title></head>Â
<body>Â Â Â Â <!-- Create a simple web page -->Â Â Â Â <div>Â Â Â Â Â Â Â Â <h1>Refresh Example </h1>Â
        <button class="btn" id="popup-btn">            Show popup        </button>    </div>Â
    <!-- Create a simple popup which is hidden using CSS -->    <div id="wrapper">        <div id="popup">            <div>                <h2>POPUP</h2>                <button class="btn" id="close-btn">                    Close                </button>            </div>        </div>    </div></body></html> |
CSS
/* Css Styling */h1 {    font-size: 45px;    font-family: 'Courier New',        Courier,        monospace;    text-align: center;}Â
.btn {Â Â Â Â 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;}Â
#popup-btn {Â Â Â Â margin-left: 45%;}Â
#wrapper {Â Â Â Â 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;}Â
#popup {Â Â Â Â width: 50%;Â Â Â Â height: 50%;Â Â Â Â background-color: white;Â Â Â Â display: flex;Â Â Â Â justify-content: center;Â Â Â Â align-items: center;Â Â Â Â border-radius: 10px;}Â
h2 {Â Â Â Â font-family: 'Courier New', Courier, monospace;Â Â Â Â font-weight: bold;Â Â Â Â font-size: 40px;} |
Javascript
// Attach event listener to open popupdocument.getElementById(Â Â Â Â 'popup-btn').addEventListener('click', (e) => {Â Â Â Â Â Â Â Â document.getElementById(Â Â Â Â Â Â Â Â Â Â Â Â 'wrapper').style.visibility = "visible";Â Â Â Â })Â
// Attach event listener to first close popup and then refresh pagedocument.getElementById(Â Â Â Â 'close-btn').addEventListener('click', (e) => {Â Â Â Â Â Â Â Â document.getElementById(Â Â Â Â Â Â Â Â Â Â Â Â 'wrapper').style.visibility = "hidden";Â Â Â Â Â Â Â Â window.location.reload();Â Â Â Â }); |
Output: Click here to check the live Output.
 
