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…</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…</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

你可以覆盖bootstrap模态的modal-header，modal-footer。

添加以下代码。

CodeIgniter

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');    
    });

    }
);

从twitter bootstrap模式中删除模态页脚

6 个答案: