引导模式仅显示背景

Bootstrap modal only showing backdrop

本文关键字：显示 背景 模式      更新时间：2023-09-26

编辑：我发现了问题。原来，最初制作这个页面的人在他创建的模态上错过了一个关闭的<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"。它由调用此函数的<span>中的onclick属性触发

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

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

在SO上的另一篇帖子中，我尝试从模态中删除.hide类，并确保该模态具有唯一的id。如果有其他想法，我们将不胜感激。

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

尝试：

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

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

更改容器样式属性

z-index: 10

只要它藏起来就往上走实验哪个容器应该有这个

这可能是个老问题。我今天淡化了它，以下是我的错误案例：

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");
                    }
                });
            });

并且您不能提醒数据，这是代码端错误，而不是设计端错误

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

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

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

此外，这里不需要数据消除，因为您可以使用.toggle() .hide() .show()在jQuery中处理所有数据。

这是钢笔

对于后代和任何其他正在处理旧代码的人来说，我的根本原因更简单，与Bootstrap无关。症状相同(背景显示但没有内容(。我只是少了一个标签。一旦我去掉了所有模态主体内容，并开始将每个内容逐1添加，错误就暴露了出来。

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

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

应该是：

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

这并没有立即显现出来，因为模态没有尝试请求它。

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

相关文章：