How to refresh parent page on closing a popup ?
Last Updated :
25 Apr, 2023
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 >
< div >
< h1 >Refresh Example </ h1 >
< button class = "btn" id = "popup-btn" >
Show popup
</ button >
</ div >
< div id = "wrapper" >
< div id = "popup" >
< div >
< h2 >POPUP</ h2 >
< button class = "btn" id = "close-btn" >
Close
</ button >
</ div >
</ div >
</ div >
</ body >
</ html >
|
CSS
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
document.getElementById(
'popup-btn' ).addEventListener( 'click' , (e) => {
document.getElementById(
'wrapper' ).style.visibility = "visible" ;
})
document.getElementById(
'close-btn' ).addEventListener( 'click' , (e) => {
document.getElementById(
'wrapper' ).style.visibility = "hidden" ;
window.location.reload();
});
|
Output: Click here to check the live Output.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...