Modal Popup Effect Using JavaScript and CSS in Web API

Introduction

In this article I will show you the modal popup effect using JavaScript and CSS in the Web API. Here we use JavaScript code and CSS code for generating the effect.

  1. First create an Web API application as in the following:
    • Start Visual Studio 2012.
    • From the Start window select "New Project".
    • From the new project window select "Installed" -> "Visual C#" -> "Web".
    • Select "ASP.NET MVC4 Web Application" and click the "OK" button.

      pop.jpg

    • From the "MVC4 Project" window select "Web API".

      pop1.jpg

    • Click the "OK" button.
  2. Select the "index.cshtml" file. This file exists:
    • In the "Solution Explorer".
    • Expand the "Views" folder.
    • Select "Home" -> "index.cshtml" file.

      pop2.jpg

      Add the following code.
      1. @{  
      2.     ViewBag.Title = "ModalPopup effect using javascript and css";  
      3. }  
      4. <style type="text/css">  
      5. .skyblue  
      6. {   
      7.   top:20%;  
      8.   left:20%;  
      9.   z-index:1000;  
      10.   position:absolute;  
      11.   background-color:skyblue;  
      12.   display:compact;     
      13. }    
      14. .hidepopup  
      15. {   
      16.   display:none;  
      17. }   
      18. .brown  
      19. {   
      20.   background-color:brown;  
      21.   filter: alpha(opacity=70);  
      22.   opacity: 0.7;    
      23.   width:100%;   
      24.   height:100%;  
      25.   z-index:auto;  
      26.   position:absolute;  
      27.   top:auto;  
      28.   left:auto;  
      29. }  
      30. </style>  
      31. <script type="text/javascript">  
      32.     function Display() {  
      33.       document.getElementById("browndiv").className = "brown";  
      34.         document.getElementById("skybluediv").className = "skyblue";  
      35.     }  
      36.     function HidePopup() {  
      37.         document.getElementById("skybluediv").className = "hidepopup";  
      38.         document.getElementById("browndiv").className = "hidepopup";  
      39.         return false;  
      40.     }  
      41. </script>  
      42. <h4>Modal effect by using javascript and css</h4><br />  
      43. <input type="button" value="Test Function" onclick="javascript: Display();"/>  
      44.  <div id="browndiv">  
      45.     </div>  
      46. <div id="skybluediv" style="width:200px;height:200px;border-color:blue;border-style:solid;" class="hidepopup">  
      47.    <div id="divvalue">What is this?<br />This is the simple example of the modal effect using javascript and css</div><br />  
      48.   <div style="text-align:center" ><input type="button" value="Close"  onclick="javascript: HidePopup();"/></div>  
      49. </div>
      There is the CSS code is this:
      1. <style type="text/css">  
      2. .skyblue  
      3. {   
      4.   top:20%;  
      5.   left:20%;  
      6.   z-index:1000;  
      7.   position:absolute;  
      8.   background-color:skyblue;  
      9.   display:compact;     
      10. }    
      11. .hidepopup  
      12. {   
      13.   display:none;  
      14. }   
      15. .brown  
      16. {   
      17.   background-color:brown;  
      18.   filter: alpha(opacity=70);  
      19.   opacity: 0.7;    
      20.   width:100%;   
      21.   height:100%;  
      22.   z-index:auto;  
      23.   position:absolute;  
      24.   top:auto;  
      25.   left:auto;  
      26. }
      This code is responsible for the formatting of the page.

      The following code is the JavaScript code:
      1. <script type="text/javascript">  
      2.     function Display() {  
      3.       document.getElementById("browndiv").className = "brown";  
      4.         document.getElementById("skybluediv").className = "skyblue";  
      5.     }  
      6.     function HidePopup() {  
      7.         document.getElementById("skybluediv").className = "hidepopup";  
      8.         document.getElementById("browndiv").className = "hidepopup";  
      9.         return false;  
      10.     }  
      11. </script>
      There are two methods defined, the first one is "Display" and the second one is "HidePopup". The "Display" method accesses the ".brown" and "skyblue" CSS classes. And the second Function "Hidepopup" accesses the "hidepopup" class of the CSS.
  3. Execute the application by pressing "F5".

    pop3.jpg

    Click on the button then display a popup modal.

    pop4.jpg