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