Javascript 仅显示背景的引导模式

编辑：我发现了问题。原来，最初创建此页面的人在他创建的模式上遗漏了一个结束标记，因此我的模式的内容隐藏在原始页面中

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

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

同样的代码在我们的开发服务器上工作，但是自从将其移动到testserver之后，这种情况就开始发生了，或者我想不会发生

从上的另一篇文章中，我尝试从模式中删除.hide类，并确保此模式具有唯一的id。如果有其他想法，我们将不胜感激。

尝试：

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

---

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

更改容器样式属性

z-index: 10

只要它藏起来就上去

---

实验哪个容器应该有这个

可能是个老问题。我今天把它褪色了，下面是我的错误案例：

1/CSS冲突 在调试和查看结果时，尝试删除页面中一些奇怪的css链接，一些css库不能与引导一起工作

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

---

而且您不能警告数据，即代码端错误，而不是设计端错误

如果模型html被呈现到页面的隐藏区域，它也不会显示

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

&时代；

打开小模式

如果删除内联css，模型将出现在中间的演示链接上

---

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

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

此外，这里不需要数据消除，因为您可以在jQuery中使用

.toggle（）.hide（）.show（）

处理所有数据

---

我在调用错误格式的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将找到第一个匹配的元素，在本例中是冲突的元素。解决方案当然是重命名其中一个元素。

是否检查了浏览器控制台中的错误？您使用的是哪个版本的引导？控制台中没有错误。事实上，使用控制台，我可以看到当模式被触发时，模式上的类发生了变化。引导v2.3.2相同的结果。问题不在于触发模态，模态本身没有显示。这个事件之所以会触发，是因为背景显示。好吧，很可能是一些风格问题。使用左边距为正的

和/或其他样式进行测试如何？对于边框，您可以使用例如
边框：2px纯黑祝你好运！
$('#campaign-bulk-create').load( DD.baseDir + '/my-controller').modal('show');

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