html - 从 twitter 引导模式中删除模式页脚

Question

我想从我的模态中删除页脚。但它只是删除内容，而不是它所获得的空间。

这是我的代码...

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
</div>

Answer 1

如果您不在<div class="modal-footer">模态模板中使用 ' '，那么 bootstrap 将为您制作。我认为这就是为什么您在代码中看到页脚的原因。我的解决方案是在模板中隐藏页脚（最后一行）：

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;       </button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer" style="display:none"></div>
</div>

Answer 2

尝试这个

<div class="modal-footer" hidden="true"></div>

Answer 3

我很确定“额外空间”是<p>边距。试试这个CSS：

.modal .modal-body p {
    margin-bottom: 0;
}

Answer 4

我认为这是因为modal-footer课堂上的填充物。尝试覆盖它

.modal .modal-footer {
    padding: 4px;
}

我保留它4px以保留圆角

Answer 5

您可以覆盖引导模式的 modal-header、modal-footer。

添加以下代码。

 .modal-footer{display: none;}

Answer 6

这可以使用 jQuery 来实现

require(
[
    'jquery',
    'Magento_Ui/js/modal/modal'
],
function(
    $,
    modal
) {

    var options = {
        type: 'popup',
        responsive: true,
        innerScroll: true,
        buttons: []
    };

    $('#approvalsModal').modal(options,{
        closed: function(){
           // Do some action when modal closed
        }
    });

    $(".approvalsModal").click(function(){
        $("#approvalsModal").modal('openModal');    
    });

    }
);