1. app.component.html (Note that we are using same method call on two buttons: this is your choice. you can use different method calls also.) Also note the property binding [] for style in popup div. It should be [] and not () !.
<div >
<label>This is main page div</label>
<button (click)="onButtonClick()">Open Popup</button>
</div>
<div [style]="popupHideShow" class="modal">
<div class="modal-content">
<label>This is popup</label>
<button (click)="onButtonClick()">Close Popup</button>
</div>
</div>
2. app.component.ts : The sole work is to toggle "display:block" or "display:none" depending on button press.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'simplest-popup';
popupHideShow = "display:none";
onButtonClick()
{
if ( this.popupHideShow == "display:none")
{
this.popupHideShow = "display:block";
}
else
{
this.popupHideShow = "display:none";
}
}
}
3. The Most important : app.component.css
.modal {
display: none;
position: fixed; /* this is imp, otherwise popup will not fill entire screen */
z-index: 1;
top: 0;
left:0;
width:100%;
height:100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
}
.modal-content {
width:80%; /* as per your requirement , width of popup relative to screen */
margin:15% auto;
padding:20px;
border: 1px solid #888;
background-color: #fefefe;
}
