How to create custom Modal using JavaScript

Posted at
How to make a Modal, Javascript Modal, Codepen Modal

Hey there everyone, here is another web designing tutorial in which you will be learning how you can create a custom modal by yourself using HTML, CSS and JavaScript. You can use it for your project, blog or website. We will not be using any other sources such as Bootstrap. I'll be discussing this article in steps and at the end I will be giving my Codepen demo code and also link to my Github repository for this tutorial. So, first let's know what Modal is.

What is a Modal?

A Modal is a dialog or alert box, that pops up on the user's screen to display certain message. Modal content can be of anything, it may contain any HTML element (Image, Links or Paragraphs). The Site owner can use Modal for many different purposes such as Advertise, Showing a featured post or join certain program or a pop-up for download or a alert/warning message.

How Modal works?

So, how are we going to make the modal. A Modal always pops-up on top or hover over every element (HTML page: Body).

To make the modal work we need three things:

  1. A Modal interface
  2. A button or trigger to show the Modal
  3. A button to close/hide the Modal

How to make a Modal?

Step1.

Everything you see in a webpage is actually an Element division. So, you see a modal pop-up, it is also a element. Let's define a DIV with a class "Modal-back" at the end of the body tag, keeping it away every other element so its styling does not affect other. Add the DIV just before the ending like this.

.... <div class="Modal-back"> <div class="Modal-content"> <a class="close-btn"> <span></span> <span></span> </a> <div class="M-Header"> <h2>This is the Modal</h2> </div> <div class="content"> <h3 id='MsgText'>This is Modal Content.</h3> </div> </div> </div> </body>

Step2.

Add Styling with CSS

Some additional CSS for body of the page except Modal

<style> .... .blur{filter: blur(3px);} .... </style>

This 'blur' class will give a blur effect to the whole background when the Modal will display giving a nice feel and look.

CSS for Modal

<style> /*-----------------------------Modal CSS------------------------*/ .Modal-back{ height: 100vh;width: 100%; position: fixed;z-index: 2;top: 0; visibility: hidden;opacity: 0; display: flex;justify-content: center;align-items: center; transition: visibility .5s , opacity .5s; } .Modal-show{visibility: visible;opacity:1;} .Modal-content{background-color: #fff; width: 50%;height: 50%;border-radius: 10px; box-shadow: 0 0 6px 3px grey; } .Modal-content .content{padding: 15px;height: 90%; display: flex;flex-direction: column;justify-content: center;align-items: center; } .Modal-content .content span{margin: 10px 0px; } .Modal-content .content span input[type='text']{padding:5px} .M-Header{padding: 0 15px; background-image: linear-gradient(45deg, #ce0707, transparent); border-top-left-radius: 10px;height: 10%;color: #fff; } .close-btn{height: 10%;width: 40px; display: flex;align-items: center;justify-content: center; cursor:pointer;transition: .5s;float: right;border-top-right-radius: 10px; } .close-btn:hover{background-color: #bd0000;} .close-btn:hover span{background-color: #fff;} .close-btn span{height: 25px;width: 3px;background-color: #000;display: block;position: absolute;} .close-btn span:nth-child(1){transform: rotate(45deg);} .close-btn span:nth-child(2){transform: rotate(315deg);} </style>

You must have noticed that the CSS class .Modal-back is having style property
'visibility: hidden;' and 'opacity: 0;' which keeps the Modal hidden at the beginning. Which is what we Want.

There is another class '.Modal-show' which makes the modal appear.
But how are we going to do that. We will use JavaScript and make button that will add 'Modal-show' class to the Modal.

Step3.

Add a button 'Show Modal'

<button class="Modal-btn">Show Modal</button>

Add a button in your document with a class 'Modal-btn'. Because we will using this class name as the selector in Javascript.

Now Add JavaScript

<script> var ShowModalBtn = document.querySelector('.Modal-btn'); var Modal = document.querySelector('.Modal-back'); var CloseModalBtn = document.querySelector('.close-btn'); /*On Click of Show Modal Button*/ ShowModalBtn.addEventListener('click' ,function(){ Modal.classList.add('Modal-show'); document.querySelector('.container section').classList.add('blur'); }); /*On Click of Close cross-Modal Button*/ CloseModalBtn.addEventListener('click' ,function(){ Modal.classList.remove('Modal-show'); document.querySelector('.container section').classList.remove('blur'); }); </script>

Codepen Example

Here is an working Codepen Example:

See the Pen by bishal-biswas (@bishal-biswas) on CodePen.

Bishal Biswas
Written by Bishal Biswas Founder of Coding Bishal Blog.
A student with a dream of becoming a professional web developer. I like to explorer and write articles on computer & tech related stuffs on my blog.
Tags, , , , ,
Post a Comment
Share

Comments