Introduction

We can show and hide the modal using the methods provided by Bootstrap Modal plugin.

Description

We are using modal ('show') and modal ('hide') methods to show and hide the login modal.

Reference

Before this article you should go through my Introduction to Bootstrap. Show Bootstrap Image Using Asp.Net MVC http://www.c-sharpcorner.com/blogs/bootstrap-image-show-using-asp-net-mvc3

Steps

Create a controller class file called "HomeController.cs" and add controller action method called "ModalPopUp()";
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace SatyaMVCBootstrapImages.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. //
  12. // GET: /Home/
  14. public ActionResult Index()
  15. {
  16. return View();
  17. }
  19. public ActionResult ModalPopUp()
  20. {
  21. return View();
  22. }
  24. }
  25. }
Then create a view file named "ModalPopUp.cshtml".
  1. @{
  2. ViewBag.Title = "Satyaprakash Bootstrap PopUp";
  3. }
  5. <title>@ViewBag.Title</title>
  7. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9. <style>
  10. .button {
  11. background-color: #4CAF50; /* Green */
  12. border: none;
  13. color: white;
  14. padding: 15px 32px;
  15. text-align: center;
  16. text-decoration: none;
  17. display: inline-block;
  18. font-size: 16px;
  19. margin: 4px 2px;
  20. cursor: pointer;
  21. }
  23. .button1 {
  24. border-radius: 2px;
  25. }
  27. .button2 {
  28. border-radius: 4px;
  29. }
  31. .button3 {
  32. border-radius: 8px;
  33. }
  35. .button4 {
  36. border-radius: 12px;
  37. }
  39. .button5 {
  40. border-radius: 50%;
  41. }
  42. </style>
  43. <div>
  44. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash Bootstrap PopUp</h2>
  45. <fieldset>
  46. <legend style="color:orangered">Click On Satyaprakash Bootstrap PopUp</legend>
  47. <div class="container">
  48. <div class="row">
  49. <div class="col-xs-12">
  51. <button id="btnShowModal" type="button"
  52. class="btn btn-sm btn-default pull-left col-lg-11 button button4">
  53. Satya Modals
  54. </button>
  56. <div class="modal fade" tabindex="-1" id="loginModal"
  57. data-keyboard="false" data-backdrop="static">
  58. <div class="modal-dialog modal-lg">
  59. <div class="modal-content">
  60. <div class="modal-header">
  61. <button type="button" class="close" data-dismiss="modal">
  62. ×
  63. </button>
  64. <h4 class="modal-title">Satya Login</h4>
  65. </div>
  66. <div class="modal-body">
  67. <form>
  68. <div class="form-group">
  69. <input class="form-control" type="text"
  70. placeholder="Login Username" id="inputUserName" />
  71. </div>
  72. <div class="form-group">
  73. <input class="form-control" placeholder="Login Password"
  74. type="password" id="inputPassword" />
  75. </div>
  76. </form>
  77. </div>
  78. <div class="modal-footer">
  79. <button type="submit" class="btn btn-primary button button4">Sign</button>
  80. <button type="button" id="btnHideModal" class="btn btn-primary button button4">
  81. Hide
  82. </button>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </fieldset>
  92. </div>
  93. <footer>
  94. <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
  95. ©
  96. <script> document.write(new Date().toDateString()); </script>
  97. </p>
  98. </footer>
  99. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  100. </script>
  101. <script src="bootstrap/js/bootstrap.min.js"></script>
  103. <script type="text/javascript">
  104. $(document).ready(function () {
  105. $("#btnShowModal").click(function () {
  106. $("#loginModal").modal('show');
  107. });
  109. $("#btnHideModal").click(function () {
  110. $("#loginModal").modal('hide');
  111. });
  112. });
  113. </script>
Here all reference files like bootstrap.min.css and jquery.min.js and bootstrap.min.js should be added to
add bootstrap features.

I have added code for a button to perform modal popup.
  1. <button id="btnShowModal" type="button"
  2. class="btn btn-sm btn-default pull-left col-lg-11 button button4">
  3. Satya Modals
  4. </button>
I have added code for the modal form to appear in a fade style.
  1. <div class="modal fade" tabindex="-1" id="loginModal"
  2. data-keyboard="false" data-backdrop="static">
Here is the code for size of the modal.
  1. <div class="modal-dialog modal-lg">
Controls are added Inside Modal content such as header text , buttons, cross symbol button, text boxes and related control properties:
  1. <div class="modal-content">
  2. <div class="modal-header">
  3. <button type="button" class="close" data-dismiss="modal">
  4. ×
  5. </button>
  6. <h4 class="modal-title">Satya Login</h4>
  7. </div>
  8. <div class="modal-body">
  9. <form>
  10. <div class="form-group">
  11. <input class="form-control" type="text"
  12. placeholder="Login Username" id="inputUserName" />
  13. </div>
  14. <div class="form-group">
  15. <input class="form-control" placeholder="Login Password"
  16. type="password" id="inputPassword" />
  17. </div>
  18. </form>
  19. </div>
  20. <div class="modal-footer">
  21. <button type="submit" class="btn btn-primary button button4">Sign</button>
  22. <button type="button" id="btnHideModal" class="btn btn-primary button button4">
  23. Hide
  24. </button>
  25. </div>
  26. </div>
For cross symbol button in header part.
  1. <button type="button" class="close" data-dismiss="modal">
  2. ×
  3. </button>
For Header part.
  1. <div class="modal-header">
  2. <button type="button" class="close" data-dismiss="modal">
  3. ×
  4. </button>
  5. <h4 class="modal-title">Satya Login</h4>
  6. </div>
For textBoxes
  1. <div class="modal-body">
  2. <form>
  3. <div class="form-group">
  4. <input class="form-control" type="text"
  5. placeholder="Login Username" id="inputUserName" />
  6. </div>
  7. <div class="form-group">
  8. <input class="form-control" placeholder="Login Password"
  9. type="password" id="inputPassword" />
  10. </div>
  11. </form>
  12. </div>
For footer part.
  1. <div class="modal-footer">
  2. <button type="submit" class="btn btn-primary button button4">Sign</button>
  3. <button type="button" id="btnHideModal" class="btn btn-primary button button4">
  4. Hide
  5. </button>
  6. </div>
Here I added one javascript and added button id such as btnShowModal and btnHideModal to show and hide modal.
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $("#btnShowModal").click(function () {
  4. $("#loginModal").modal('show');
  5. });
  7. $("#btnHideModal").click(function () {
  8. $("#loginModal").modal('hide');
  9. });
  10. });
  11. </script>
Here I added css style to add style in buttons.
  1. <style>
  2. .button {
  3. background-color: #4CAF50; /* Green */
  4. border: none;
  5. color: white;
  6. padding: 15px 32px;
  7. text-align: center;
  8. text-decoration: none;
  9. display: inline-block;
  10. font-size: 16px;
  11. margin: 4px 2px;
  12. cursor: pointer;
  13. }
  15. .button1 {
  16. border-radius: 2px;
  17. }
  19. .button2 {
  20. border-radius: 4px;
  21. }
  23. .button3 {
  24. border-radius: 8px;
  25. }
  27. .button4 {
  28. border-radius: 12px;
  29. }
  31. .button5 {
  32. border-radius: 50%;
  33. }
  34. </style>
OUTPUT

Desktop View


By clicking hide button Or Cross Mark on header it will be hidden.

Mobile View

SUMMARY
We learned:
What is Modal Popup in bootstrap?
How to get it with Asp.net MVc.