Bootstrap toast 组件在数据表上无法正常工作

Question

我有一个简单的数据表，我想用 Bootstrap toast 组件添加一些通知，但是背景过滤器属性在表格上方时无法正常工作。

Toast 在表格以外的任何元素中都可以正常工作。

图像上的实际结果。

如何解决这个问题？

关注我的代码

let id = 1234;

function addToast(message, autohide){
    
    id++;

    let html =''+
    '<div id="'+ id + '" class="toast" data-autohide="'+ autohide +'" data-delay="5000" data-animation="true">'+
        '<div class="toast-header">'+
            '<button type="button" class="ml-auto mb-1 close" data-dismiss="toast" aria-label="Close">'+
                '<span aria-hidden="true">&times;</span>'+
            '</button>'+
        '</div>'+
        '<div class="toast-body">'+
            '<span>'+message +'</span>'+
        '</div>'+
    '</div>';

    $('.toast-box').append(html);
    $('#'+ id).toast('show');

    $('#'+ id).on('hidden.bs.toast', function () {
        $(this).remove();
    });
}

$(function(){
    $('#records').DataTable();
    addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
    addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
    addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
    addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
});

.toast-area{
    position: fixed;
    right: 0;
}

.toast-box{
    position: absolute;
    right: 0;
    top: 0;
    min-width: 250px;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<div class="container">
    <div class="toast-area" aria-live="polite" aria-atomic="true">
<div class="toast-box"></div>
</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatem quidem rem earum! Ex pariatur in, officia maiores esse doloribus earum nam necessitatibus beatae iste obcaecati reiciendis. Porro, corrupti error.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatem quidem rem earum! Ex pariatur in, officia maiores esse doloribus earum nam necessitatibus beatae iste obcaecati reiciendis. Porro, corrupti error.</p>
    <div class="table-responsive">
        <table class="table table-striped" id="records">
            <thead>
                <th>Nome</th>
                <th>User</th>
                <th>Age</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jonh Doe</td>
                    <td>john</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td>Jonh Doe</td>
                    <td>john</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td>Jonh Doe</td>
                    <td>john</td>
                    <td>33</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

你只需要在css class.toast-area{z-index:99}中添加一个z-index

Answer 2

更改 .toast-area 以包含 z-index 以便它覆盖数据表...

.toast-area{
    position: fixed;
    right: 0;
    z-index: 1;
}

Codeply demo

Answer 3

toast 背景似乎是透明的，因此请尝试为您的 toast box 添加背景颜色。

.toast-box{
    position: absolute;
    right: 0;
    top: 0;
    min-width: 250px;
    background-color:white;
}