I. HTML

HTML Mark-up

We start by create a button that will be clicked to open the modal window.
The second will be an element which will act as a full screen dark and transparent modal window. Inside a modal window we then create another element which will be a modal with a close button inside it. You can put other content inside this modal like a user subscribe form for example.

II. CSS

1.Modal window

The modal window should be a fixed such that its doesn't move even the page is scrolled by user, thus we use position:fixed;.Then width and height is 100% so to make it full screen.
The next step is to hide modal window by default so that it is only shown when the user clicks the button. We use transform: scale(0);,and the zero will hide the modal window. We then use transition property to animate the process of showing the modal.

.modal-container{
  width:100%;/*full screen horizontally*/
  height:100%; /*full screen vertically*/
  background: rgba(0,0,0,.5);   /*dark and transparent*/
  position: fixed;/*doesn't move even the page is scrolled */
  transform: scale(0);/*Hide modal window by default*/
  transition:all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;/* to use flex box properties*/
  align-items: center;/*vertically align content*/
  justify-content: center;/*horizontally align content*/
}

2.Modal Active class

The plan is to show the modal window if the button is clicked. This can be done by an active class with transform:scale(1) and use JavaScript to add This class in our modal window to change transform:scale(0) to transform:scale(1).

.active-modal{
  transform: scale(1);          
 }

3.Vanilla JavaScript

2.Query select Button and Modal

We going to use the modal window and the opening button to create the interaction. We use query Selector to select classes of these elements.

  const modal = document.querySelector('.modal-container');
  const button = document.querySelector('.btn');

2.Onclick event Listener

Let’s use add event listener for click event on both elements (modal window and button). If the button is click the function showModal() will be clicked, to show the modal window. If the user clicks on the close button on the modal or anywhere in the modal window, the hideModal() function to close the modal will be called.

   button.addEventListener('click',showModal);
   modal.addEventListener('click',hideModal);

3.Hide and Show Modal Function

Now remember we created an active class called active-modal,now we going to use classList.add() to add this class to the modal window when showModal() is called. Now the modal will be display when the user click the button.
When the use clicks anywhere in the screen or the close button, the classList.remove() will remove the active class and the modal will disappear when the chideModal() function is called. Now the modal can be hidden or shown.

 
function showModal(e){
 modal.classList.add('active-modal');   
 }
function hideModal(e){
  modal.classList.remove('active-modal');   
}