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 */ h 1 {
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 : 100 vw;
height : 100 vh;
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 ;
} h 2 {
font-family : 'Courier New' , Courier , monospace ;
font-weight : bold ;
font-size : 40px ;
} |
Javascript
// Attach event listener to open popup document.getElementById( 'popup-btn' ).addEventListener( 'click' , (e) => {
document.getElementById(
'wrapper' ).style.visibility = "visible" ;
})
// Attach event listener to first close popup and then refresh page document.getElementById( 'close-btn' ).addEventListener( 'click' , (e) => {
document.getElementById(
'wrapper' ).style.visibility = "hidden" ;
window.location.reload();
});
|
Output: Click here to check the live Output.