Question

我有一个模态窗口，背景图像作为背景css属性。问题是背景图像看起来比模态本身快得多。如何使它们同时出现？

这是我的模态窗口的HTML代码：

<div class="modal" id="regModal" tabindex="-1" role="dialog" aria-labelledby="regModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-center modal-carpet" style="min-height: 400px;">
        <div class="modal-content"></div>
    </div>
</div>

这是一个班级.modal：

.modal {  
    border: none !important;
    overflow: hidden;
    background-position: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    background: url('/img/carpet_simple.png') no-repeat fixed center;
}

所以background: url('/img/carpet_simple.png') no-repeat fixed center;即时出现，比呈现模式的内部HTML代码快得多。

我试过这个解决方案。它有效，但显然不是一个好的。我只是让一个背景图像出现在300毫升之后：

.pic {
    background: url('/img/carpet_simple.png') no-repeat fixed center;
}

$('.modal').on('shown.bs.modal', function() {    
    var timeOutId = setTimeout(function() {
        $("#regModal").addClass("pic");
        clearTimeout(timeOutId);
        delete(timeOutId);
    }, 280);
});

$('.modal').on('hide.bs.modal', function() {
    $("#regModal").removeClass("pic");
});

如何使背景与模态内部html代码同时显示或至少稍后显示？没有我的解决方案。

Answer 1

您可以将javascript事件用于模态。例如loaded.bs.modal;当模态使用远程选项加载内容时会触发此事件。

$('#myModal').on('loaded.bs.modal', function (e) {
  // do something...
})

您可以阅读有关here

的模式的其他事件

如何使模态窗口的背景图像与模态窗口同时出现，而不是之前？

1 个答案: