I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.

It's a somewhat plicated set up but I'll do my best to explain it.

The modal definition looks like this:

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

You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.

The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.

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

I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.

Any ideas?

I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.

It's a somewhat plicated set up but I'll do my best to explain it.

The modal definition looks like this:

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

You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.

The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.

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

I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.

Any ideas?

• javascript
• jquery
• html
• twitter-bootstrap

• can you share code using jsfiddle – Anil Commented Aug 17, 2017 at 20:08

1 Answer 1

You have your footer outside the modal-content div. Structure should go:

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

You have it as this (your missing a div in the html you posted btw):

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

Functioning code below so you can see the correct structure in action:

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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./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>