by: KSPosted on:

How to display div like modal ?

In this post we will learn how to display div like modal by using CSS below are the details.

  • Create one div
  • Add class name as “modal“
  • Add below mentioned css to “modal” class
  • Here position and z-index properties are required to display div as modal and above the page.
  • Here we have given higher value as compared to page-container as div/container with higher z-index will be displayed above the div/container having less z-index.
.modal {
 position: relative;
 font-size: 15px;
 padding: 15px;
 width: 60%;
 text-align: center;
 z-index: 2;
}
  • Also add “page-container” class to page so that the modal will be displayed above the page.
.page-container{
   z-index: 1;
}