bootstrap modal box vertical centering effect

The effect of this example is actually a click pop-up effect for your reference. The specific content is as follows

First, add jquery code

 //The modal box is vertically centered function centerModals() {
  $('.modal').each(
    function(i) {
     var $clone = $(this).clone().css('display', 'block')
       .appendTo('body');
     var top = (($() - $(
       '.modal-content').height()) / 2);
     top = top &gt; 0 ? top : 0;
     $();
     $(this).find('.modal-content').css("margin-top",
       top - 50);
    });
 }
 $('.modal').on('', centerModals);
 $(window).on('resize', centerModals);

html code

&lt;!--Login pop-up window--&gt;
 &lt;form action="__URL__/doLogin" method="post" class="form-horizontal"&gt;

  &lt;!--Modal frame name--&gt;
  &lt;div class="modal"  tabindex="-1"&gt;
   &lt;!--Window name--&gt;
   &lt;div class="modal-dialog modal-sm"&gt;
    &lt;!--Content name--&gt;
    &lt;div class="modal-content"&gt;
     &lt;div class="modal-header"&gt;
      &lt;button class="close" data-dismiss="modal"&gt;
       &lt;span&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
      &lt;h4 class="modal-title"&gt;User login&lt;/h4&gt;
     &lt;/div&gt;

     &lt;div class="modal-body"&gt;
      &lt;div class="form-group has-success has-feedback"&gt;

       &lt;label for="username" class="col-sm-3 control-label"&gt;account&lt;/label&gt;
       &lt;div class="col-sm-9"&gt;
        &lt;span class="glyphicon glyphicon-user form-control-feedback"
         aria-hidden="true"&gt;&lt;/span&gt; &lt;span 
         class="sr-only"&gt;(success)&lt;/span&gt; &lt;input type="text"
          name="username" class="form-control"
         placeholder="Please enter your username" title="Can contain Chinese numbers and common characters"
         onkeydown="if(==32||==13){return false;}"&gt;
        &lt;!-- Disable spaces and enter --&gt;

       &lt;/div&gt;
      &lt;/div&gt;


      &lt;div class="form-group has-success has-feedback"&gt;
       &lt;label for="password" class="col-sm-3 control-label"&gt;password&lt;/label&gt;
       &lt;div class="col-sm-9"&gt;
        &lt;span class="glyphicon glyphicon-lock form-control-feedback"
         aria-hidden="true"&gt;&lt;/span&gt; &lt;span 
         class="sr-only"&gt;(success)&lt;/span&gt; &lt;input type="password"
          name="password" class="form-control"
         maxlength="12" placeholder="Please enter your password" oncopy="return false"
         oncut="return false" onpaste="return false" title=""
         onkeydown="if(==32||==13){return false;}"&gt;

       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
      &lt;div class="form-group"&gt;
       &lt;div class="col-sm-offset-2 col-sm-10"&gt;
        &lt;button type="submit" class="btn btn-success" &gt;Log in now
         »&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/form&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.