Open In App

How to Align modal content box to center of any screen?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The Bootstrap Modal plugin is a dialog box/popup window that is displayed on top of the current page. By default, the Bootstrap modal window is aligned to the top of the page with some margin. But you can align it in the middle of the page vertically by using CSS vertical-align property. We also can use JavaScript to centered the modal
Below examples illustrate the approach:

Example 1: First, we will design modal content for the sign-up then by using CSS we will align that modal centered(vertically). Using the vertical-align property, the vertical-align property sets the vertical alignment of an element.




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Modal Alignment</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
          integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
          crossorigin="anonymous">
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        
        /* Text alignment for body */
        body {
            text-align: center;
        }
          
        /* Styling h1 tag */
        h1 {
            color: green;
            text-align: center;
        }
          
        /* Styling modal */
        .modal:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
          
        .modal-dialog {
            display: inline-block;
            vertical-align: middle;
        }
          
        .modal .modal-content {
            padding: 20px 20px 20px 20px;
            -webkit-animation-name: modal-animation;
            -webkit-animation-duration: 0.5s;
            animation-name: modal-animation;
            animation-duration: 0.5s;
        }
          
        @-webkit-keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
          
        @keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
    </style>
</head>
  
<body>
  
    <h1>
      GeeksforGeeks
    </h1>
    <p>
      A Computer Science Portal for Geeks
    </p>
    <a href="#signupModal" data-toggle="modal">
      Sign-Up</a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">
                        ×
                    </button>
                    <h2 class="myModalLabel"> Sign Up </h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
  
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email" class="form-control" 
                               id="email" placeholder="Email Address">
                    </div>
  
                    <!-- Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password" class="sr-only">
                          Password
                        </label>
                        <input type="password" class="form-control"
                               id="password" placeholder="Choose a password">
                    </div>
  
                    <!-- Confirm Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password2" class="sr-only">
                          Confirm Password
                        </label>
                        <input type="password" class="form-control" 
                               id="password2" placeholder="Confirm password">
                    </div>
                </div>
  
                <!-- Modal footer -->
                <div class="footer">
                    <button type="submit">Sign Up</button>
                    <p>
                        Already have an account?!
                        <a href="#loginModal" data-toggle="modal"
                           data-dismiss="modal">
                           Login!
                        </a>
                    </p>
                </div>
  
            </div>
        </div>
    </div>
  
</body>
  
</html>


Output :

Example 2: Similarly we first create a modal content for the sign-up then instead of CSS we will use JavaScript to centered the modal(vertically). We will use CSS for designing just. In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.




<!DOCTYPE html>
<html>
  
<head>
    <title>Center Align Bootstrap Modal Vertically</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
          integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
          crossorigin="anonymous">
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        
        /* Text alignment for body */
        body {
            text-align: center;
        }
          
        /* Styling h1 tag */
        h1 {
            color: green;
            text-align: center;
        }
          
        /* Styling modal */
        .modal .modal-content {
            padding: 20px 20px 20px 20px;
            -webkit-animation-name: modal-animation;
            -webkit-animation-duration: 0.5s;
            animation-name: modal-animation;
            animation-duration: 0.5s;
        }
          
        @-webkit-keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
          
        @keyframes modal-animation {
            from {
                top: -100px;
                opacity: 0;
            }
            to {
                top: 0px;
                opacity: 1;
            }
        }
    </style>
</head>
  
<body>
  
    <h1>
      GeeksforGeeks
    </h1>
    <p>
      A Computer Science Portal for Geeks
    </p>
    <a href="#signupModal" data-toggle="modal">
      Sign-Up
    </a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">
                        ×
                    </button>
                    <h2 class="myModalLabel">Sign Up</h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
  
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email" class="form-control" 
                               id="email" placeholder="Email Address">
                    </div>
  
                    <!-- Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password" class="sr-only">
                          Password
                        </label>
                        <input type="password" class="form-control"
                               id="password" placeholder="Choose a password">
                    </div>
  
                    <!-- Confirm Password -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-lock"></i>
                        </span>
                        <label for="password2" class="sr-only">
                          Confirm Password
                        </label>
                        <input type="password" class="form-control" 
                               id="password2" placeholder="Confirm password">
                    </div>
                </div>
  
                <!-- MOdal footer -->
                <div class="footer">
                    <button type="submit">Sign Up</button>
                    <p>
                        Already have an account?!
                        <a href="#loginModal" data-toggle="modal"
                           data-dismiss="modal">
                           Login!
                        </a>
                    </p>
                </div>
  
            </div>
        </div>
    </div>
  
    <script>
        $(document).ready(function() {
              
            /* Centering the modal vertically */
            function alignModal() {
                var modalDialog = $(this).find(".modal-dialog");
                modalDialog.css("margin-top", Math.max(0, 
                ($(window).height() - modalDialog.height()) / 2));
            }
            $(".modal").on("shown.bs.modal", alignModal);
  
            /* Resizing the modal according the screen size */
            $(window).on("resize", function() {
                $(".modal:visible").each(alignModal);
            });
        });
    </script>
  
</body>
  
</html>


Output :

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 30 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads