Preview:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alertas com Sessions</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .notice {
            display: none;
            padding: 10px;
            margin: 10px auto;
            width: 300px;
            border-radius: 5px;
            text-align: center;
        }
        .notice-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .notice-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div id="notice-success" class="notice notice-success">
        <?= $_SESSION['success'] ?? '' ?>
    </div>
    <div id="notice-error" class="notice notice-error">
        <?= $_SESSION['error'] ?? '' ?>
    </div>

    <script>
        $(document).ready(function () {
            <?php if (isset($_SESSION['success'])): ?>
                $('#notice-success').fadeIn();
                setTimeout(function () {
                    $('#notice-success').fadeOut();
                }, 5000);
            <?php unset($_SESSION['success']); endif; ?>

            <?php if (isset($_SESSION['error'])): ?>
                $('#notice-error').fadeIn();
                setTimeout(function () {
                    $('#notice-error').fadeOut();
                }, 5000);
            <?php unset($_SESSION['error']); endif; ?>
        });
    </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter