Aujourd'hui, je vais vous apprendre à centrer verticalement la boîte modale Bootstrap. J'espère que vous apprendrez patiemment.
La version actuelle de bootstrap est 3.x Dans la version actuelle, il n'y a pas d'attribut de centrage vertical pour le modal bootstrap (boîte modale).
Si vous souhaitez que le modal soit centré verticalement, vous devez actuellement le gérer vous-même.
Option 1. Une fois le modal affiché avec succès, réinitialisez la position de margin-top
<p class="modal " id="myModal"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button class="close" data-dismiss='modal'>×</button> <h4 class="modal-title">测试模态框标题</h4> </p> <p class="modal-body"> <p>内容…</p> </p> <p class="modal-footer"> <button class="btn btn-default" data-dismiss='modal'>关闭</button> </p> </p> </p> </p> <button class="btn btn-primary" data-toggle='modal' data-target='#myModal'> 点击测试弹框 </button>
Surveillance des événements de réussite du chargement :
$('#myModal').on('shown.bs.modal', function () { var $this = $(this); var dialog = $this.find('.modal-dialog'); //此种方式,在使用动画第一次显示时有问题 //解决方案,去掉动画fade样式 var top = ($(window).height() - dialog.height()) / 2; dialog.css({ marginTop:top }); });
Option 2. Modifiez le code source dans le code source, définissez la position de margin-top à l'avance (recommandé)
Remarque : Cette méthode est utilisée. Le fondu d'animation s'affiche normalement.
Modifiez le code source, où la position de la boîte de dialogue est définie
Modal.prototype.adjustDialog = function () { var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight this.$element.css({ paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' }) // 是弹出框居中。。。 var $modal_dialog = $(this.$element[0]).find('.modal-dialog'); var m_top = ( $(window).height() - $modal_dialog.height() )/2; $modal_dialog.css({'margin': m_top + 'px auto'}); }
Recommandations associées :
notes d'étude bootstrap bootstrap layout method_html/css_WEB - ITnose
Notes de démarrage de Bootstrap (Zéro) Introduction à Bootstrap_html/css_WEB-ITnose
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!