Question

我使用Bootstrap Modal并显示模态页脚div，其灰色背景用于阻挡主页面，而不是模态其余部分使用的白色背景。

这有点复杂，但我会尽力解释。

模态定义如下所示：

<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 id="concert-modal-title" class="modal-title"></h4>
        </div>
        <div id="concert-modal-body" class="modal-body">

        </div>
    </div>

    <div class="modal-footer">
        <span id="ConcertMessage" class="pull-left"></span>
        <button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
        <button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
    </div>

</div>

您会看到模态体部分为空。那是因为我有javascript使用Mustache.js模板系统来设置主体的html使用模板和Ajax调用的返回。一切正常，模态体正确显示。

模态主体由一个Bootstrap选项卡控件和一个包含所有选项卡窗格的表单组成，因此整体结构如下所示。

<ul class="nav nav-tabs nav-justified nav-justify">
    <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">Basic </a></li>
    <li><a href="#tab-2" role="tab" data-toggle="tab">Media </a></li>
    <li><a href="#tab-3" role="tab" data-toggle="tab">Tickets </a></li>
</ul>
<form id="concert-form" action="#" class="form-horizontal">
    <div class="hidden">
        <input type="text" name="Mode" id="Mode">
        <input type="text" name="ConcertID" value="{{ConcertID}}">
    </div>
    <div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
</form>

我使用了html语法检查程序来确保我没有任何未关闭的标记。我还尝试将表单标记放在代码中的几个不同位置，但无论我做什么，模态页脚部分都无法正确显示。

有什么想法吗？

Answer 1

您的页脚位于模态内容div之外。结构应该：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

你有这样的（你在btw发布的html中缺少一个div）：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
        </div>
        <div class="modal-footer"></div>
    </div>
</div> <!--missing div in the example you posted here-->

下面的功能代码，以便您可以看到正确的结构：

＆＃13;

$(document).ready(function(){
	$('#concert-modal').modal('show');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
            </div>
            <div id="concert-modal-body" class="modal-body">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
            </div>
            <div class="modal-footer">
                <span id="ConcertMessage" class="pull-left"></span>
                <button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
                <button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Bootstrap模态页脚未正确显示

1 个答案: