Dialog horizontal Vertical Center in bootstrap

Method One:

Html:

<button type= "button"  class= "Btn btn-primary btn-lg"  data-toggle= "modal"   data-target= "#myModal" >    Launch demo modal</button><!-- modal  --><div class= "Modal fade"  id= "Mymodal"  data-backdrop= "Static"  tabindex= " -1 " role=" dialog " aria-labelledby=" Mymodallabel " aria-hidden=" true ">     <div class= "Modal-dialog" >        <div class= " Modal-content ">            <div class=" Modal-header ">                 <button type= "button"  class= "Close"  data-dismiss= "modal"  aria-label= "close" > <span aria-hidden= "true" >&times;</span></button>                  
 JavaScript: 
 
 do like this for more best user experience,// but you  have to remove dialog  "Fade"  class (used animation) $ ("[role= ' dialog ']"). On ( "Shown.bs.modal",  function ()  {    var  $modalDialog  = $ (this). Find (". Modal-dialog"),         $modalBody  = $ (this). Find (". Modal-body "),        dialogheight =  $modalDialog. Height (),         dialogWidth =  $modalDialog. Width (),         windowheight = $ (window). Height (),         windowwidth = $ (window). width ();     // when dialog  height greater than window height,    // use default  margin top value to set dialog position.    if  (windowHeight <  dialogheight)  {        // do nothing         return;    }    // when dialog  height less than window height,    // dialog position  set it with vertical center.     $modalDialog. CSS ({          "position":  "absolute",          "Top":  "50%",         "left":  "50%",          "MarginLeft": -  ( dialogWidth / 2 ),          "MarginTop": -  ( dialogHeight / 2 )   (&NBSP;&NBSP;&NBSP;});});
Note: This is a good way to remove the fade class, otherwise there will be a bad user experience
Mode two: Modify Bootstrap.js source code
      that. $element         .addclass (' in ')         .attr (' Aria-hidden ',  false)        that.enforcefocus ()/***************************************************************/       var  $modalDialog  = that. $element. Find (". Modal-dialog"),           dialogHeight =  $modalDialog. Height (),           windowheight = $ (window). Height (),           // When dialog height greater than  window height,      // use default margin top  value to set dialog position.      if  (windowHeight  < dialogheight)   {          // do nothing           return;      }           // Dialog position set it with vertical  center.       $modalDialog. CSS ({            "MarginTop":  ( windowheight - dialogheight)  / 2       });/**************************************************************/       var e = $. Event (' Shown.bs.modal ',  { relatedtarget: _relatedtarget })
Note: Add code between block-level annotations, 722 lines in bootstrap
Dialog horizontal Vertical Center in bootstrap