Bootstrap模态仅显示背景 [英] Bootstrap modal only showing backdrop

问题描述

编辑：我发现了这个问题。原来让这个页面错过关闭< div> 标签的人在他/她创建的模态上，所以我的模态的内容隐藏在原始内容中。

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 只包含简单的字符串'Test test test test'。它由< span> 中的 onclick 属性触发，该属性调用此函数

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

从SO上的另一篇文章中我尝试从模态中删除.hide类，并确保这个模态有一个唯一身份。任何其他想法为什么会被赞赏。

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.

推荐答案

我刚删除了一些关于元素的CSS并取代了jQuery函数。 / p>

I just removed some of the CSS on the Elements and replaced the jQuery Function.

$(".modal-btn").click( function(){
  $("#timePopup").toggle(300);
});

此处也不需要数据关闭，因为你可以用<$ jQuery处理它c $ c> .toggle（）。hide（）。show（）。

Also the data-dismiss is not necessary here, since you can handle it all in jQuery with .toggle() .hide() .show().

这是笔

这篇关于Bootstrap模态仅显示背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！