Question

我在问题上走了很长时间，我无法找出问题所在。这是一个打印屏幕。

我希望绿色内容周围的背景都是黑暗的，你可以看到桌面标题在黑暗之上。我该如何解决？这是css：

.modalMenu {
    display: block;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-success-message-content {
    background-color: rgba(0, 230, 0, 0.9);
    margin: 15% auto;
    padding: 10px;
    border-radius: 5px;
    width: 70%;
    height: auto;
}

以下是我用于表格的框架的CSS：

.sticky-table {
    max-width: 100%;
    max-height: 80vh;
    overflow: auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 0!important
}
.sticky-table table {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    border-spacing: 0
}
.sticky-table table tr.sticky-row td, .sticky-table table tr.sticky-row th {
    background-color: #fafafa;
    border-top: 0;
    position: relative;
    outline: #ddd solid 1px;
    z-index: 3
}
.sticky-table table td.sticky-cell, .sticky-table table th.sticky-cell {
    background-color: #fafafa;
    outline: #ddd solid 1px;
    position: relative;
    z-index: 3;
}
.sticky-table table tr.sticky-row td.sticky-cell, .sticky-table table tr.sticky-row th.sticky-cell {
    z-index: 4
}

html table

<div style="white-space: nowrap; height: 60vh;" class="sticky-table sticky-headers sticky-ltr-cells" id="divTableContainer">
    <table class="table table-striped">
        <thead>
            <tr class="sticky-row">
                <th class="sticky-cell"> </th>
            </tr>
        </thead>
    </table>
</div>

html模式

<div class="modalMenu">
    <div class="modal-success-message-content"> <b>SUCESSO: </b>
    <span id="modalSuccessMessageMsg"></span> </div>
</div>

javascript到标题

jQuery(document).on('stickyTable', function() {
    $(".sticky-headers").scroll(function() {
        $(this).find("table tr.sticky-row th").css('top', $(this).scrollTop());
        $(this).find("table tr.sticky-row td").css('top', $(this).scrollTop());
    });
    $(".sticky-ltr-cells").scroll(function() {
        $(this).find("table th.sticky-cell").css('left', $(this).scrollLeft());
        $(this).find("table td.sticky-cell").css('left', $(this).scrollLeft());
    });
    $(".sticky-rtl-cells").scroll(function() {
        var maxScroll = $(this).find("table").prop("clientWidth") - $(this).prop("clientWidth");
        $(this).find("table th.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
        $(this).find("table td.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
    });
});
$( document ).ready(function(){
    $( document ).trigger( "stickyTable" );
});

Answer 1

您可以尝试为.modalMenu

提供更高的z-index

.modalMenu{
     z-index:99999; // number depends on your site
}

表标题位于模态消息的背景之上

1 个答案: