Vertically centering Bootstrap modal window

前端 未结 30 1934
被撕碎了的回忆
被撕碎了的回忆 2020-12-07 07:00

I would like to center my modal on the viewport (middle) I tried to add some css properties

 .modal { position: fixed; top:50%; left:50%; }   
30条回答
  •  不思量自难忘°
    2020-12-07 07:26

    To make Modal verically Align Middle All dialog.

    /* Note:

    1.Even you don't need to assign selector , it will find all modal from the document and make it vertically middle

    2.To avoid middle some specific modal to be it center you can use :not selector in click event

    */

     $( "[data-toggle='modal']" ).click(function(){
         var d_tar = $(this).attr('data-target'); 
         $(d_tar).show();   
         var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
         var win_height = $(window).height();
         var marr = win_height - modal_he;
         $('.modal-dialog').css('margin-top',marr/2);
      });
    

    From Milan Pandya

提交回复
热议问题