So lösen Sie das Problem, dass die BootStrap-Modalbox nicht vertikal zentriert ist

Dieser Artikel stellt hauptsächlich die Lösung des Problems vor, dass die BootStrap-Modalbox nicht vertikal zentriert ist. Ich hoffe, dass sie jedem helfen kann.

Lösen Sie das Problem: Die mit BootStrap gelieferte Modalbox ist nicht vertikal zentriert

Lösung: Rufen Sie die von BootStrap bereitgestellte Methode $('.modal').on('show .bs.modal', function(){});

Wir verwenden JS, um den Top-Wert des Modalfelds zu ändern, bevor er angezeigt wird.

Das Spezifische Der Code lautet wie folgt:

/** 
 * 垂直居中模态框 
 **/ 
function centerModals() { 
  $('.modal').each(function(i) { 
    var $clone = $(this).clone().css('display', 'block').appendTo('body'); 
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); 
    top = top > 50 ? top : 0; 
    $clone.remove(); 
    $(this).find('.modal-content').css("margin-top", top - 50); 
  }); 
} 
// 在模态框出现的时候调用垂直居中方法 
$('.modal').on('show.bs.modal', centerModals); 
// 在窗口大小改变的时候调用垂直居中方法 
$(window).on('resize', centerModals);

Verwandte Empfehlungen:

AJAX und SpringMVC Detaillierte Erläuterung der Paging-Abfragefunktion der Bootstrap-Modalbox

Bootstrap-Modalbox-Verschachtelung, Tabindex-Attribut und Schattenentfernungsmethode

Technische Erklärung für Bootstrap-Modalbox

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die BootStrap-Modalbox nicht vertikal zentriert ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!