Question

编辑：我发现了这个问题。原来让这个页面错过关于他/她创建的模态的关闭<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只包含简单的字符串＆＃39;测试测试测试＆＃39;。它由onclick中的<span>属性触发，该属性调用此函数

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

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

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

Answer 1

尝试：

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

其中.selector引用span元素中的类或id。

Answer 2

更改容器样式属性

z-index: 10

只要隐藏起来就

上去试验哪个容器应该有这个

Answer 3

可能是一个老问题。我今天褪色，这是我的错误案例：

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

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

Answer 4

如果模型html呈现在页面的隐藏区域中，它将不会显示

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

Answer 6

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

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

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

Here is the Pen

Answer 7

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

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

应该是：

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

这不是立即可见，因为模式不会尝试请求它。

Answer 8

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

Bootstrap模态仅显示背景

8 个答案: