Bootstrap 模态仅显示背景答案

【问题标题】：Bootstrap modal only showing backdropBootstrap 模态仅显示背景
【发布时间】：2014-06-16 13:42:13
【问题描述】：

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

我的引导模式没有显示对话框，而是只显示变暗的背景。我在页面的页脚中设置了以下模式。

<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 属性触发

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

完全相同的代码在我们的开发服务器上运行，但自从将其移至测试服务器后，这已经开始发生，或者我想没有发生。

在 SO 上的另一篇文章中，我尝试从模态中删除 .hide 类，并确保此模态具有唯一的 ID。任何其他想法为什么会受到赞赏。

【问题讨论】：

您是否检查过浏览器控制台中的错误？
您使用的是哪个版本的引导程序？
控制台中没有错误。实际上，使用控制台我可以看到触发模态时模态上的类发生变化。引导 v2.3.2

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

如果模态html被渲染到页面的隐藏区域，它也不会显示

【讨论】：

【解决方案2】：

试试：

$(function(){
 $('.selector').click(function() {
   $('#timePopup').modal('show');
 });
});

其中 .selector 指的是 span 元素中的类或 id。

【讨论】：

同样的结果。问题不在于触发模态，而是模态本身没有显示。该事件正在触发，因为背景显示。
好的，所以很可能是一些风格问题。用积极的margin-left 和/或其他一些样式进行测试怎么样？对于边框，您可以使用例如border:2px solid black;祝你好运！

【解决方案3】：

更改容器样式属性

z-index: 10

只要它被隐藏就上去试验哪个容器应该有这个

【讨论】：

【解决方案4】：

可能这是一个老问题。我今天把它淡化了，这些是我的这个错误的例子：

1/ CSS 冲突调试时尝试删除页面中一些奇怪的css链接并查看结果，一些CSS库不能与Bootstrap一起使用

2/ ajax 发布出错，数据永不返回如果您的代码中有类似

$(function () {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("GetCarts", "Cart")',
                    success: function (data) {
                        var result = data;
                        $('#myCart').html(result);
                        alert(data);
                    },
                    fail: function () {
                        alert("Error with ajax");
                    }
                });
            });

而且您无法提醒数据，即代码端错误，而不是设计端错误

【讨论】：

【解决方案5】：

<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">
<div class="modal-content">
    <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position: absolute; top: 3px; right: 7px; z-index: 9999;">&times;</button>
        </div>
    <div class="modal-body" style='border: black solid 2px;margin: 5px;'>
        <?php echo $popup_content; ?>
    </div>
    </div>
</div>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#timePopup">Open Small Modal</button>

如果您删除内联 css，模型将出现在中间演示链接上 https://jsfiddle.net/kingtaherkings/fcnLqyhf/2/

【讨论】：

【解决方案6】：

我刚刚删除了元素上的一些 CSS 并替换了 jQuery 函数。

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

这里也不需要 data-dismiss，因为您可以在 jQuery 中使用 .toggle() .hide() .show() 处理这一切。

Here is the Pen

【讨论】：

【解决方案7】：

我在调用格式错误的 URL 时遇到了这个问题。我错过了最后的动作：

$('#campaign-bulk-create').load( DD.baseDir + '/my-controller').modal('show');

应该是：

$('#campaign-bulk-create').load( DD.baseDir + '/my-controller/my-action').modal('show');

这不是很明显，因为模态不会尝试请求它。

【讨论】：

【解决方案8】：

如果您的 modal 和另一个元素之间存在命名空间冲突（相同的 id 属性，或者您的 modal 选择了它的内容），并且冲突元素在 DOM 中较高，则触发 modal 将使模态背景出现但不会选择显示您的模态。相反，JS 会找到第一个匹配的元素，在这种情况下是冲突元素。解决方案当然是重命名您的元素之一。

【讨论】：