Bootstrap modal only showing backdrop

Question

EDIT: I've found the issue. Turns out the person who originally made this page missed a closing <div> tag on modal s/he had created, so the content of my modal was hidden inside the original.

My bootstrap modal is not showing the dialog box, instead only showing the darkened backdrop. I have the following Modal set up in the footer of my page.

<div id="timePopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style='border-radius:0px;width:430px;margin-left:-215px'>
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position: absolute; top: 3px; right: 7px; z-index: 9999;">&times;</button>
        <div class="modal-body" style='border: black solid 2px;margin: 5px;'>
            <?php echo $popup_content; ?>
        </div>
    </div>
</div>

$popup_content just contains the simple string 'Test test test test'. It is triggered by an onclick attribute in a <span> which call this function

function forcePopUp(){
    jQuery('#timePopup').modal('show');
}

The exact same code worked on our development server, but since moving it to the testserver this has started happening, or not happening i suppose.

From another post on SO I tried removing the .hide class from the modal, and have ensured this modal has a unique id. Any other ideas why would be appreciated.

Answer 1

If the modal html is rendered into a hidden area of the page, it won't display either