Tạo thông báo đơn hàng

Tạo thông báo đơn hàng

Đầu tiên mình cài sweetalert2 https://sweetalert2.github.io/

Tiếp theo mình code phần thông báo 

<div id="thongbao" class="swal2-container swal2-bottom-start hienthi" style="overflow-y: auto;display: none">
    <div aria-labelledby="swal2-title" aria-describedby="swal2-html-container"
         class="swal2-popup swal2-toast swal2-icon-success swal2-show" tabindex="-1" role="alert" aria-live="polite"
         style="width: fit-content; display: grid;bottom: 20px;    position: absolute;  margin: 10px;">
        <h2 class="swal2-title" id="swal2-title" style="display: block;">Heheh</h2>
        <div class="swal2-html-container" id="swal2-html-container" style="display: block;">Xin chúc mừng chị Hoa đã trúng giải 3
        </div>
    </div>
</div>'

Phần javascript 

<?php
$keys = ['sky', 'grass', 'orange'];
$values = ['blue', 'green', 'orange'];
?>
<script>
    var myVar = setInterval(function (){
        notification1();
        document.getElementById("thongbao").style.display = "block";
        setTimeout(ab,3000)
        console.log('123');
    },5000);
    const ab = function displaynone(){
        document.getElementById("thongbao").style.display = "none";
    }
    var phones = [];
    <?php
    foreach ($keys as $phonevnf){
    //$sdt = explode('|', $phonevnf);
    ?>
    phones.push("<?php echo $phonevnf; ?>");
    <?php } ?>

    const notification1 = function messagess(){
        var tieude = phones[Math.floor(Math.random()*phones.length)];
        document.getElementById("swal2-title").innerHTML = tieude;
        document.getElementById("swal2-html-container").innerHTML = tieude;
    }
</script>